w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » D3 JS » Page 1
d3js: Elements lingering even after .exit().remove()
It was a simple enough fix, in the end, arrived after some time meditating over Thinking with Joins: Before (gives gap-toothed ring charts): var path = svg.selectAll("path") .data(pie(dataset)); path.exit().remove(); path.enter() .append("path") .style("stroke-width", "1px") .style("stroke", "w

Categories : D3 Js

Meteor, where to put d3 code?
You should use the rendered callback with a template autorun. Out of the box that doesn't work with 1.0, however there's a trick - you can get the autorun to rerun after a context change by using Template.currentData like this: Template.myTemplate.rendered = function() { this.autorun(function() { var data = Template.currentData(); // use data with d3 here }); }; For more details, se

Categories : D3 Js

d3js not having the same behaviour within and outside a function
The first time you run the function, the body element already exists. In your code, you're doing: Selection = d3.select("body"); cours = [ { titre : " 1" } , { titre : " 2" } , { titre : " 3" } ] ; Updated_selection = Selection.data( cours ); Updated_selection .enter () .append("h1") When you bind your data to DOM elements with the .

Categories : D3 Js

Min and Max function in d3.js
One simple method is to create two lists -- one of "atimes" and "btimes" -- and then take the d3.extent of those lists concatenated: >>> // Some example data >>> arr = [ {atime: 0, btime: 1}, {atime: 12, btime: -1}, {atime: 7, btime: 3} ] >>> atimes = arr.map(function(d){ return d.atime }) >>> btimes = arr.map(function(d){ return d.btime }) >>> d3.exte

Categories : D3 Js

Determining coordinates in lat/lng of a point in pixels on a map after zoom has been applied
After zoom has been applied, I haven't found a way to go from a point in pixel to a coordinate in lng/lat or from a point in pixel to a country. That being said, I found an alternate method that works well too. I have a list of all the countries and their centroids in lng/lat. From that list, I resolve their position in pixel and adjust them based on scale and translation. Finally, I find which o

Categories : D3 Js

c3js - change the initial date label in x-axis
This was a painfully long learning process, for a very badly-documented library. But I had to use a function for the format option for the tick, and then format the title again for the tooltip. Here's the final, working copy. HTML (Include the d3.js, c3.js, and c3.css scripts too) <body> <div id="chartContainer"></div> </body> JS var chart = c3.generate({ bindto:

Categories : D3 Js

d3 circles in the centre of rectangles
You need two things to make it work: You can't add a text element inside a rect so you need to append your text nodes to the svgContainer and for that to work, you need to do the .selectAll('text').data(jsondata).enter().append('text') as you are doing with the circles. The center of the rectangles is the position of the rect plus half of the width/height, you are doing the position plus the wid

Categories : D3 Js

D3 - Make Axes Include Origin at (0,0)
Does this help? y.domain([0, d3.max(data, function (d) { return d.y; })]) .nice(); x.domain([0, d3.max(data, function (d) { return d.x; })]) .nice();

Categories : D3 Js

D3 -- Arcs for chord diagram not being displayed
Your problem stems from the fact that d3.tsv is asynchronous: Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url... The request is processed asynchronously. As a result, all of your code under "Define diagram layout" is being executed before any data is loaded. Otherwise, your code works fine (See image below). So just move all your code into yo

Categories : D3 Js

How to iterate nodes properly
The .each() function is defined on D3 selections, so there's no need to select an existing selection again. However, .each() is not defined on .enter(). var sel = d3.selectAll("div").data([1,2,3]); sel // .each() is defined, but the selection is empty sel.enter() // .each() is not defined on .enter() sel.enter().append("div").html(function(d) { return d; }); sel.each(function(d) { // now .each

Categories : D3 Js

d3.js: Nesting data - key returns undefined for all data
Thanks to Lars's suggestion yesterday, I managed to get this working, using the queue.js library by Mike Bostock. In case anyone else runs into this problem, here are the steps I followed: First, I called queue.js in my <head>, right after the d3.js call: <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org

Categories : D3 Js

d3.js choropleth map example error
congress is not an Array — it's an Object: { meta: { limit: 100, offset: 0, total_count: 540 }, objects: [ {...}, {...}, {...}, {...} ] } Need to iterate over congress.objects: congress.objects.forEach(function() {...})

Categories : D3 Js

Fixing color to each path for donut in d3js
I have found the solution, here it goes, instead of adding at the end I have added color the the path when it is creating var color = d3.scale.ordinal() .domain(parseInt(totalwater),parseInt(ruralwater),parseInt(urbanwater)) .range(["red","blue","orange"]); var arcs = groupx.selectAll(".arc")

Categories : D3 Js

Why are both of these lines coming up the same color?
It won't let me add a comment so here's an attempted answer: I think the issue is that you pass in the whole SVG element in your lineColor function which sets the stroke color globally, i.e. for all lines on the SVG. Append a "g" element to the SVG for each of the lines and pass that in to the lineColor function instead. That should solve your issue! Sorry for the lack of code example, I am not f

Categories : D3 Js

dimple.js Scatter Plot issues
You've used category axes which is an ordinal axis of the distinct values. That's the reason for the behaviours you describe, they are being treated as text values not numbers. Try using a measure axis like this: xAxis = myChart.addMeasureAxis("x", "x"); yAxis = myChart.addMeasureAxis("y", "y"); You also need to adjust the series to include the x and y dimensions, otherwise they will be aggre

Categories : D3 Js

Modify lines/tooltip on hover
First, you can change the color of the lines (links) just using a simple CSS hover, like so: .link:hover { stroke:blue; } This will turn the links blue on mouse over or hover. Second, adding tooltips is slightly more complicated. One way is to have a hidden <div> on your page that becomes visible and moves to the <text> you are mousing over. It will then be hidden when you mo

Categories : D3 Js

Change D3 scale from linear to pow by pushing a button
You need to assign the new scale to the axis. You should also set domain/range for the new scale: xScale = d3.scale.pow().exponent(2) .domain([0, 10]) .range([50, 350]); vis.select('.xaxis').transition().call(xAxis.scale(xScale)); Complete demo here.

Categories : D3 Js

Avoid duplicate dates in d3js axes
Thank you @Lars Kotthoff for helping out. This is the basic solution: var ticks = scale.ticks(userSpecifiedTicks); var nonDuplicateTickValues = []; var tickAlreadyExists = function(tickValIn) { for(var i=0;i<nonDuplicateTickValues.length;i++) { var t = nonDuplicateTickValues[i]; var formattedTickValIn = formatter(tickValIn); var formattedTickVal = formatter(t);

Categories : D3 Js

Change Default d3.js colors
First, just FYI, to see the RGB (i.e. hex) value that corresponds to these numbers: (2062260).toString(16); // 16 for hex, aka base 16 > "1f77b4" Next, given an RGB (again, hex) that you want to convert to number: parseInt("1f77b4", 16); // 16 for hex > 2062260 And that would be the number you want to use. The colors you got from the d3 source are used to construct what you get from d

Categories : D3 Js

D3.js - secondary axis alignment
You can use a scale's .invert() function to convert projected (screen) coordinates back to values in the original domain. Bearing this in mind, the process is Get the projected values for the first axis. If you want those to be the tick values, use scale.ticks() and pass them to the first scale to convert to screen coordinates. Now pass those values to scale.invert() for the second axis scale. T

Categories : D3 Js

Stroke rendering inside of Topojson area. How to change the style of the full shape?
Say all your drawn shapes are in a data-bound d3 selection called shapes (which you create using the usual enter, update, exit flow). Then something like this should work: shapes.on('mouseover', function(d, i) { // d is the datum of the hovered shape // data is all the data currently bound to shapes var data = shapes.data(); // this'll sort the data such that the hovered d is last in th

Categories : D3 Js

D3.js - adding text to nodes in force-directed graph
SVG doesn't allow you to put text elements inside circles. You actually can't append anything to circles, rects, paths, etc. A better approach is to append a group for each point, translate it into place, and put a circle and a text element inside that. Here's the relevant code. var node = svg.selectAll("g.node") .data(convertedInfo.nodes) .enter() .append("g") .attr("class", "node") .a

Categories : D3 Js

Maintaining data positions when zooming in d3
Ah, I figured it out! It suddenly occurred to me what the problem was. All it required was changing: projection.translate([((width/2)+d3.event.translate[0]),((height/2)+d3.event.translate[1])]); to projection.translate([((width*d3.event.scale/2)+d3.event.translate[0]),((height*d3.event.scale/2)+d3.event.translate[1])]); Which makes sense — the original width/height were not the same beca

Categories : D3 Js

Multiple mouseover events with d3.tip
I ended up needing to pass the data object in to the tip.show() function. The final code: map.on("mouseover", function(d){ tip.show(d); }) map.on("mouseout", function(d){ tip.hide(d); });

Categories : D3 Js

d3js: d3.json() throwing unexpected error
As far as I see, the API is CORS- and JSONP-enabled: The Congress API supports CORS for all domains, so requests using any modern JavaScript library inside any modern browser should Just Work. If CORS isn’t an option, you can provide a callback parameter to wrap the results in a JavaScript function, suitable for use with JSONP. This can be used to make cross-domain requests to t

Categories : D3 Js

D3.js: Mouse over between grid lines
There is nothing there to click on/hover over. The normal axis/grid creates lines, not rectangles. You would need to change the default behave of the axis objects to create "invisible, but clickable" rectangles in order to be able to attach a mouse event to those spaces. I don't know if this is the recommended approach but it seems like it could work. After the axis has been created: something

Categories : D3 Js

Cannot draw multiple lines
Your data isn't the right format to draw multiple lines directly; for that you need a nested structure. You can create this using d3.nest(): var nested = d3.nest() .key(function(d) { return d.category; }) .entries(data); This then gives you something you can use directly to draw the lines like this: vis.selectAll("path.line").data(nested) .enter().append("path") .attr("class", "line")

Categories : D3 Js

D3 custom attributes not being selected
I rearranged the looping to have each <polygon> be contained within a <g> tag, where I put the posX and posY attributes, instead. Through the mouseenter event, I select this using D3 on the polygon, step up to its parent, then work from there. jQuery is able to see the attributes on the <g> so this workaround seemed to accommodate my needs.

Categories : D3 Js

How can I color ocean with topojson in d3 when I have coordinate info for land?
There's no need (and it would be pretty difficult and somewhat expensive computationally) to figure out the inverse of the landmass. But you can just color the background. I.e you can use CSS: svg { background: lightBlue; } or you can prepend a <rect> element with a blue fill behind the map: svg.append('rect') .attr('width', mapWidth) .attr('height', mapHeight) .attr('fill', 'li

Categories : D3 Js

Directed, acyclic graph in d3.js
You may have a try to dagre, a JS library for DAG graphs. If you want to use d3 for whatever reason, have a look at dagre-d3 For a more high-level approach have a look at this project using all the libs above. If d3 is not mandatory have also a look at others graphs library. ;)

Categories : D3 Js

D3.js focus + context via brushing
Your data has a resolution of one second, so you're going to get a very noisy graph (in fact exactly what you're getting). You probably want to do some binning, where you aggregate the data to make it less noisy. In principle, the code looks like this (to aggregate by the minute): function type(d) { d.date = parseDate(d.date); d.count = +d.count; d.date.setSeconds(0); var key = d

Categories : D3 Js

Extend data to extent of graph
I think that cubism uses a single pixel for each time slice, so if you've only got 220 timesteps only 220 pixels are needed. Check the documentation to be sure. If I'm correct then you'll either have to be creative with your timeseries and extend the timestep (by repeating adjacent records) or perhaps d3 (or one of the various libraries built on it) would better suit your purposes. – user161408

Categories : D3 Js

Bind new variables to __data__, keep existing variables
This can be done fairly easily with the selection.each function: // Add a new variable, 'z', equal 2 * x circles.each(function(d) { d.z = d.x * 2; }); Or, for the specific case where the new data to be bound is stored in a list of objects called newdata (using simple indexing to join the data): circles.each(function(d, i) { d.z = newdata[i].z; });

Categories : D3 Js

Make d3 bar chart responsive
There are two options in d3 to make the chart responsive. Using view box and aspect ratio Using resize function using resize function :Responsive Bar chart

Categories : D3 Js

NVD3 Horizontall Bar Chart labels too long
What you're wanting to do is likely beyond the capabilities of nvd3 as written. Actually, I just found an approach with d3 that -- with some difficulty -- could perhaps be applied to nvd3 here. It involves calculating the sentence length and size on the fly, and then wrapping it by positioning the calculated segments using absolute and relative coordinates. See here for an example: http://bl.o

Categories : D3 Js

How to display the value for the final tick on axis in D3?
Have you tried using .nice()? https://github.com/mbostock/d3/wiki/Time-Scales#nice This should do the job: xScale = d3.time.scale().domain([min,max]) .range([100,width-200]) //domain = [1980 ~ 2013] .nice()

Categories : D3 Js

Make d3 observe a property in a dataset
d3 is not going to observe your dataSet. You still need to call draw(). It feels right and it works fast because it reuses existing nodes every time you call draw(). Moreover you can use key function to bound elements to data, then even when order of the items change it will still reuse nodes with particular data. Read more about data here https://github.com/mbostock/d3/wiki/Selections#data an

Categories : D3 Js

D3 - Add background fill to rect
For best flexibility I would use other rectangles to draw the background for your bars, check the forked example: http://codepen.io/anon/pen/JnlAE // Bars svg_fun.selectAll('rect.background') .data(dataset) .enter() .append('rect') .classed('background', true) .attr('y', function(d, i) {return i * h_line; }) .attr('x', 0) .attr('height', 20)

Categories : D3 Js

quantile vs quartile in lay terms
The cumulative density function gives you the probability of a random variable being on or below a certain value. The quantile function is the opposite of that. i.e. you give it a probability and it tells you the random variable value. So the median is the value of the quantile at the probability value of 0.5. A quartile is the value of the quantile at the probabilities 0.25, 0.5 and 0.75. So,

Categories : D3 Js




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.