I'm working on a d3.js cluster diagram for a short time.
It's able to add new elements to clusters and move those elements across clusters.
I have added labels to elements but I didn't realize, how to make those labels move with the elements, if it is a new element.
My source is here: http://bl.ocks.org/heal25/9888263
If you add a new element, it's label doesn't works.
Can someone help me out?
Thank you!
I found a bug, that causes not to move a text with the element. In line 183. it must be
label = svg.selectAll("text.node")
and not
var label = svg.selectAll("text.node")
Related
I'm working on a map that is created by D3.js. I figured out how to zoom in the map and add labels by following Mike Bostock's tutorial. However, after I zoomed in the map, I don't know how to recalculate the coordinates of the labels.
I don't really understand how projection(data.geometry.coordinates) works. It seems projection() will recreate a pair of new coordinates based on the current svg, and somehow automatically place the labels for you. Thus, I tried to run projection() again in the clicked() function, but it doesn't work.
Here is the code that I'm working on, and I'm using d3 version 4, instead of 3.
If you add your towns to the g selection (instead of the svg selection), then it should work fine, as the zoom applies to that selection.
var selection = g
.selectAll("g.classTown")
.data(towns);
updated code: http://plnkr.co/edit/xJvh6LVweZqQUs7GFFH7?p=preview
I am following the link mentioned below to create d3 pack layout. what I want to change is to get fixed sized circles in every pack layout. https://bl.ocks.org/mbostock/7607535
I found the solution in the following link, but this code is for d3.v3.js S per my knowledge
Possible to use a circle pack layout in d3.js with fixed circle sizes?
can someone help me how can I achieve same size instead of its actual "d.value". Thanks in advance.
Just set the size you want using pack.radius:
If radius is specified, sets the pack layout’s radius accessor to the specified function and returns this pack layout.
So, it can be simply:
pack.radius(() => someNumber)
//your value here-----^
Here is that Bostock's code you linked with every circle having a radius of 10px: https://bl.ocks.org/anonymous/42d0e66ee507ee769907f0519d25bc8a
I am new to d3 and I am trying to do something like this. Here is what I have done so far JSFiddle, but I don't know how to align the lines to put them like in the picture and also how to put an information box below the chart.
var x=d3.scale.linear().domain([0,r]).range([0,w])
var y=d3.scale.linear().domain([r,0]).range([h,0])
center_group.append('line').attr("x1",x(r/4)).attr("y1",0);
center_group.append('line').attr("x1",x(-r/4)).attr("y1",0);
center_group.append('line').attr("x1",0).attr("y1",x(25));
center_group.append('line').attr("x1",0).attr("y1",x(-r/4));
Thanks!
If I understand correctly, you're trying to align the reticle lines within the circle. I've created a fiddle which should demonstrate a solution to the two issues in your original fiddle.
//circle svg drawn above this point...
center_group.append('line').attr("x1",x(r/6)).attr("y1",0).attr("x2",x(r/5.1));
center_group.append('line').attr("x1",x(-r/6)).attr("y1",0).attr("x2",x(-r/5.1));
center_group.append('line').attr("x1",0).attr("y1",x(19.7)).attr("y2",x(r/6));
center_group.append('line').attr("x1",0).attr("y1",x(-r/6)).attr("y2",x(-r/5.1));
//then include table, as shown here: http://bl.ocks.org/gka/17ee676dc59aa752b4e6
The first issue is that the lines were being drawn before the (white-filled) circle (so any line within the circle was covered). Second issue was that the lines were unbounded, so i added x2 and y2 attributes where needed. See picture link for results.
Regarding the information box, you could simply append a text element under the chart and drop your data in there, but for something more robust, you could include a table, as shown in the example linked in my code above (only two links allowed apparently).
I use a SELECT drop down box to choose a new JSON data source for a force network graph. The first graph draws correctly: Nodes draw on top of edges and mouseovers work as expected.
When I select the second data source, the edges draw on top of the nodes and I have lost my mouseovers. If I go back to selection "A", the same is true except for the last node.
A jsfiddle showing this problem is here:
http://jsfiddle.net/NovasTaylor/e6qjubaa/
Obligatory stack overflow code inclusion:
//EXIT
edges.exit().remove();
nodes.exit().remove();
I expect this is a problem with my ENTER/UPDATE/EXIT and perhaps the keys I am using to exit the elements? Please see the code in the fiddle.
Any advice would be greatly appreciated. My next step is to add edge labels so I want to ensure I get the nodes and edges and working first.
Tim
So just add some lines to the combobox:
d3.selectAll('#familytreecontentsvg .node')
.each(function (d) {
d.fixed = false;
})
.classed("fixed", false)
And I moved the svg object into the drawings while just initializing it empty above. Also I created an id for the SVG itself. Hope it helps. Please tell me if that is fixing your troubles.
Updated fiddle: http://jsfiddle.net/xg9fjze3/9/
When using d3 or nvd3, I'm able to change data to the chart using something like the following:
d3.select('#test1 svg')
.datum(someDataArr)
.call(chart);
Pushing an item onto the end of the someDataArr works as expected - a new item appears in the graph. However, if I shift the first item off and push a new item to the end, d3 (understandably) transitions each data point according to its index.
In the case of a scatterplot, for example, this is undesirable. I would prefer to remove the first item of the array but keep the plot points associated with their prior array index position.
Does anyone know how to keep the association between array[index] and chart points while also removing items from the beginning of the array?
Thanks in advance for your time.