i wanted to know is there way to distinguish between which element of the parent array we are appending onto and append selectively?
eg:
cell = parent.selectAll("g")
.data(nodes)
.enter()
.append("svg:g")
.filter(function(d,j){ var a = parent.selectAll("text");
for(i=0;i<3;i++)
if(a[i][0].innerHTML == d.parent.name)
return true;
return false;
})
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
parent is cell of the previous iteration which consists of 3 cells
i want to writ a filter logic such that i can choose which object of nodes array goes to which cell
i can't hard code it as it will be dynamic>
thanks for you help.
I adapted Ger Hobbelt's excellent example of group/bundle nodes
https://gist.github.com/GerHobbelt/3071239
as a JSFiddle here:
https://jsfiddle.net/NovasTaylor/tco2fkad/
The display demonstrates both collapsible nodes and regions (hulls).
The one tweak that eludes me is how to add labels to expanded nodes. I have successfully added labels to nodes in my other force network diagrams using code similar to:
nodes.append("text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) {
// d.name is a label for the node, present in the JSON source
return d.name;
});
Is anyone familiar enough with Ger's example to guide me in the right direction?
On enter, instead of appending circle append a g with a circle and a text. Then re-factor a bit to fix the movement of the g instead of the circle. Finally, append write out the .text() only if the node has a name (meaning it's a leaf):
node = nodeg.selectAll("g.node").data(net.nodes, nodeid);
node.exit().remove();
var onEnter = node.enter();
var g = onEnter
.append("g")
.attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
g.append("circle")
// if (d.size) -- d.size > 0 when d is a group node.
.attr("r", function(d) { return d.size ? d.size + dr : dr+1; })
.style("fill", function(d) { return fill(d.group); })
.on("click", function(d) {
expand[d.group] = !expand[d.group];
init();
});
g.append("text")
.attr("fill","black")
.text(function(d,i){
if (d['name']){
return d['name'];
}
});
And refactored tick to use g instead of circle:
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
Updated fiddle.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
.on("mouseover",function (d){
if(d.name=="Purchased"){
jQuery.getJSON("RequestHandler?usercommand=jsoncompany&subcommand=propCount&useraction=d3Tree_frm&mgmtId="+d.id+"&type="+d.name, function(json){
var count=JSON.stringify(json.prop_purchased_count);
result="Purchased Property :"+count;
});
}
var g = d3.select(this);
var info = g.append("text")
.classed('info', true)
.attr('x', 30)
.attr('y', 30)
.text(result);
})
.on("mouseout", function() {
d3.select(this).select('text.info').remove();
});
i am using above code to display basic tooltip on mouse over of a node. The problem is that when i move from one node to another tooltip value is not updated quickely it show me previous value .if i move my cursor little bit and move again to that node then only it shows me correct value of that node.
How to resolve that issue?
I've used arc.Centroid to try to plot my circles on the arcs with labels. However, the labels do not stay with it?
force.on("tick", function() {
text.attr("x", function(d) { return d.x + 6; })
.attr("y", function(d) { return d.y + 4; });
node.attr("transform", function(d,i) {
return "translate(" + arc[i].centroid(d) + ")"; })
});
I have attempted to put centroid & arc[i] instead of the x & y. How can I put my circles with text? http://jsfiddle.net/xwZjN/20/
Also say if I were to have more json data, would I be able to restrict the plots only going into each section e.g. each section being a category?
Any help would be great. I think the solution may be similar to this - http://jsfiddle.net/nrabinowitz/GQDUS/
It seems that the force layout is not the right choice for your application. Try to group your symbol and text in a g element and place them at the calculated coordinates. See updated fiddle without force layout: http://jsfiddle.net/xwZjN/26/
var node = svg.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d,i) {
return "translate(" + arc[i].centroid() + ")";
});
node.append("path")
.attr("d", d3.svg.symbol().type(function(d) { return d.type; }))
// change (0,0) for exact symbol placement
.attr("transform", "translate(0,0)")
.style("fill", "blue" );
node.append("text")
.text(function(d) { return d.Name; })
// shift text in nice position
.attr("x", 10)
.attr("y", 5);
I am using a large amount of JSON data from an API for D3 bar charts. I would like to show only 10-20 bars at a time. Is there a way to paginate using D3 or do I need to do this another way (php)? Any best practices or suggestions are welcome.
I know this is a late question, but maybe this can still help you out.
I would create pagination in d3 by creating a second array that only contains the data you want shown at a particular time. This sliced array would come from your primary data array. By controlling where the array is sliced, you control the pagination.
I've created a simple example here with a long array divided into five-bar 'pages'.
http://jsfiddle.net/zNxgn/2/
Please go thorugh this piece of code but it makes sense if you go through my block. I have only put the essential part of the code. Link: http://bl.ocks.org/pragyandas
var legendCount = data.series.length;
var legendWidth=10; var legendSpacing=6;
var netLegendHeight=(legendWidth+legendSpacing)*legendCount;
var legendPerPage,totalPages,pageNo;
if(netLegendHeight/height > 1){
legendPerPage=Math.floor(height/(legendWidth+legendSpacing));
totalPages=Math.ceil(legendCount/legendPerPage);
pageNo=1;
var startIndex=(pageNo-1)*legendPerPage;
var endIndex=startIndex+legendPerPage;
var seriesSubset=[],colorSubset=[];
for(var i=0;i<data.series.length;i++){
if(i>=startIndex && i<endIndex){
seriesSubset.push(data.series[i]);
colorSubset.push(colors[i]);
}
}
DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages);
}
function DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages){
var legend = svg.selectAll("g.legendg")
.data(seriesSubset)
.enter().append("g")
.attr('class','legendg')
.attr("transform", function (d, i) { return "translate(" + (width-40) + ","+ i*(legendWidth+legendSpacing) +")"; });
legend.append("rect")
.attr("x", 45)
.attr("width", legendWidth)
.attr("height", legendWidth)
.attr("class", "legend")
.style('fill',function(d,i){return colorSubset[i];});
legend.append("text")
.attr("x", 60)
.attr("y", 6)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function (d) { return d.name; });
var pageText = svg.append("g")
.attr('class','pageNo')
.attr("transform", "translate(" + (width+7.5) + ","+ (legendPerPage+1)*(legendWidth+legendSpacing) +")");
pageText.append('text').text(pageNo+'/'+totalPages)
.attr('dx','.25em');
var prevtriangle = svg.append("g")
.attr('class','prev')
.attr("transform", "translate(" + (width+5) + ","+ (legendPerPage+1.5)*(legendWidth+legendSpacing) +")")
.on('click',prevLegend)
.style('cursor','pointer');
var nexttriangle = svg.append("g")
.attr('class','next')
.attr("transform", "translate(" + (width+20) + ","+ (legendPerPage+1.5)*(legendWidth+legendSpacing) +")")
.on('click',nextLegend)
.style('cursor','pointer');
nexttriangle.append('polygon')
.style('stroke','#000')
.style('fill','#000')
.attr('points','0,0, 10,0, 5,5');
prevtriangle.append('polygon')
.style('stroke','#000')
.style('fill','#000')
.attr('points','0,5, 10,5, 5,0');
if(pageNo==totalPages){
nexttriangle.style('opacity','0.5')
nexttriangle.on('click','')
.style('cursor','');
}
else if(pageNo==1){
prevtriangle.style('opacity','0.5')
prevtriangle.on('click','')
.style('cursor','');
}
}
function prevLegend(){
pageNo--;
svg.selectAll("g.legendg").remove();
svg.select('.pageNo').remove();
svg.select('.prev').remove();
svg.select('.next').remove();
var startIndex=(pageNo-1)*legendPerPage;
var endIndex=startIndex+legendPerPage;
var seriesSubset=[],colorSubset=[];
for(var i=0;i<data.series.length;i++){
if(i>=startIndex && i<endIndex){
seriesSubset.push(data.series[i]);
colorSubset.push(colors[i]);
}
}
DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages);
}
function nextLegend(){
pageNo++;
svg.selectAll("g.legendg").remove();
svg.select('.pageNo').remove();
svg.select('.prev').remove();
svg.select('.next').remove();
var startIndex=(pageNo-1)*legendPerPage;
var endIndex=startIndex+legendPerPage;
var seriesSubset=[],colorSubset=[];
for(var i=0;i<data.series.length;i++){
if(i>=startIndex && i<endIndex){
seriesSubset.push(data.series[i]);
colorSubset.push(colors[i]);
}
}
DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages);
}