How to initiate zoomability in a Sunburst with selection from dropdown - javascript
I have a sunburst for which I would like to initiate zoom ability via dropdown. That is when a country name is selected from the drop down menu its part in the sunburst zooms exactly like when its clicked.
js fiddle: http://jsfiddle.net/8wd2xt9n/7/
var width = 960,
height = 700,
radius = Math.min(width, height) / 2;
var b = {
w: 130, h: 30, s: 3, t: 10
};
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.sqrt()
.range([0, radius]);
var changeArray = [100,80,60,0, -60, -80, -100];
var colorArray = ["#67000d", "#b73e43", "#d5464a", "#f26256", "#fb876e", "#fca78e", "#fcbba1", "#fee0d2", "#fff5f0"];
var svg = d3.select("#diagram").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.Total; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
console.log(arc)
function checkIt(error, root){
initializeBreadcrumbTrail();
//intilaize dropdown
if (error) throw error;
var g = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("g");
var path = g.append("path")
.attr("d", arc)
.style("fill", function(d) { var color;
if(d.Total_Change > 100)
{color = colorArray[0]
}
else if(d.Total_Change > 0 && d.Total_Change < 100)
{color = colorArray[1]
}
else
{
color = colorArray[2]
}
d.color = color;
return color})
.on("click", click)
.on("mouseover", mouseover);
var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltips")
.style("position", "absolute")
.style("background-color", "#fff")
.style("z-index", "10")
.style("visibility", "hidden");
g.on("mouseover", function(d){return tooltip.style("visibility", "visible")
.html("<div class=" + "tooltip_container>"+"<h4 class=" + "tooltip_heading>" +d.name.replace(/[_-]/g, " ") +"</h4>" +"<br>" + "<p> Emissions 2013:" + " " + "<br>" + d.Total + " " +"<span>in Million Tons</span></p>"+ "<br>"+ "<p> Change in Emissions: <span>" + (d.Total_Change/d.Total*100).toPrecision(3) + "%" + "</span></p>"+"</div>" );})
.on("mousemove", function(){return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
//creating a dropdown
var dropDown = d3.select("#dropdown_container")
.append("select")
.attr("class", "selection")
.attr("name", "country-list");
var nodeArr = partition.nodes(root);
var options = dropDown.selectAll("option")
.data(nodeArr)
.enter()
.append("option");
options.text(function (d) {
var prefix = new Array(d.depth + 1);
var dropdownValues = d.name.replace(/[_-]/g, " ");
return dropdownValues;
}).attr("value", function (d) {
var dropdownValues = d.name;
return dropdownValues;
});
// transition on click
function click(d) {
// fade out all text elements
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); });
}
});
};
d3.select(".selection").on("change", function changePie() {
var value = this.value;
var index = this.selectedIndex;
var dataObj = nodeArr[index];
path[0].forEach(function(p){
var data = d3.select(p).data();//get the data from the path
if (data[0].name === value){
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); });
}
});
}
});
console.log(this.value + " :c " + dataObj["Iron and steel"] + " in " + (dataObj.parent && dataObj.parent.name));
});
};
d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/55c672bbca7991442f1209cfbbb6ded45d5e8c8e/data.json", checkIt);
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function initializeBreadcrumbTrail() {
// Add the svg area.
var trail = d3.select("#sequence").append("svg:svg")
.attr("width", width)
.attr("height", 50)
.attr("id", "trail");
// Add the label at the end, for the percentage.
trail.append("svg:text")
.attr("id", "endlabel")
.style("fill", "#000");
}
function breadcrumbPoints(d, i) {
var points = [];
points.push("0,0");
points.push(b.w + ",0");
points.push(b.w + b.t + "," + (b.h / 2));
points.push(b.w + "," + b.h);
points.push("0," + b.h);
if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
points.push(b.t + "," + (b.h / 2));
}
return points.join(" ");
}
// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray) {
// Data join; key function combines name and depth (= position in sequence).
var g = d3.select("#trail")
.selectAll("g")
.data(nodeArray, function(d) { return d.name.replace(/[_-]/g, " ") + d.Total; });
// Add breadcrumb and label for entering nodes.
var entering = g.enter().append("svg:g");
entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", "#d3d3d3");
entering.append("svg:text")
.attr("x", (b.w + b.t) / 2)
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name.replace(/[_-]/g, " "); });
// Set position for entering and updating nodes.
g.attr("transform", function(d, i) {
return "translate(" + i * (b.w + b.s) + ", 0)";
});
// Remove exiting nodes.
g.exit().remove();
// Now move and update the percentage at the end.
d3.select("#trail").select("#endlabel")
.attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle");
// Make the breadcrumb trail visible, if it's hidden.
d3.select("#trail")
.style("visibility", "");
}
function getAncestors(node) {
var path = [];
var current = node;
while (current.parent) {
path.unshift(current);
current = current.parent;
}
return path;
}
function mouseover(d) {
var sequenceArray = getAncestors(d);
updateBreadcrumbs(sequenceArray);}
Add this one line and it will work :)
Inside your selection change add this var d = data[0]; as shown below:
d3.select(".selection").on("change", function changePie() {
var value = this.value;
var index = this.selectedIndex;
var dataObj = nodeArr[index];
path[0].forEach(function(p){
var data = d3.select(p).data();//get the data from the path
if (data[0].name === value){
var d = data[0];//this line is missing
path.transition()
Working code here
Other option is to call the click function on selection change like below
d3.select(".selection").on("change", function changePie() {
var value = this.value;
var index = this.selectedIndex;
var dataObj = nodeArr[index];
path[0].forEach(function (p) {
var data = d3.select(p).data(); //get the data from the path
if (data[0].name === value) {
console.log(data)
click(data[0]);//call the click function
}
Working code here
Hope this helps!
Related
d3 v4 add arrows to force-directed graph
I'm trying to create a force-directed graph in d3.js with arrows pointing to non-uniform sized nodes. I came across this example here but for the life of me I can't adapt my code to add the arrows in. I'm not sure if I need to be adding something extra to the tick function, or if I'm referencing something incorrectly. Can anyone help me out? Codepen - https://codepen.io/quirkules/pen/dqXRwj var links_data = [{"source":"ABS","target":"ABS","count":8},{"source":"ABS","target":"ATS","count":1},{"source":"ABS","target":"CR","count":8},{"source":"ABS","target":"ENV","count":1},{"source":"ABS","target":"INT","count":16},{"source":"ABS","target":"ITS","count":9},{"source":"ABS","target":"PDG","count":1},{"source":"ABS","target":"PER","count":4},{"source":"ABS","target":"PRAC","count":3},{"source":"AC","target":"AC","count":1},{"source":"AC","target":"INT","count":9},{"source":"AC","target":"ITS","count":1},{"source":"ACDC","target":"ACDC","count":1},{"source":"ACDC","target":"CR","count":2},{"source":"ACDC","target":"ITS","count":13},{"source":"ACDC","target":"PER","count":4},{"source":"APL","target":"APL","count":8},{"source":"APL","target":"CR","count":3},{"source":"APL","target":"ENV","count":1},{"source":"APL","target":"INT","count":1},{"source":"APL","target":"ITS","count":29},{"source":"APL","target":"LA","count":1},{"source":"APL","target":"PEG","count":1},{"source":"APL","target":"PER","count":3},{"source":"AST","target":"AST","count":17},{"source":"AST","target":"COP","count":1},{"source":"AST","target":"DBT","count":2},{"source":"AST","target":"DEVOPS","count":1},{"source":"AST","target":"IGN","count":1},{"source":"AST","target":"INT","count":2},{"source":"AST","target":"ITS","count":32},{"source":"AST","target":"PDG","count":2},{"source":"AST","target":"PER","count":8},{"source":"ATS","target":"ABS","count":1},{"source":"ATS","target":"ATS","count":21},{"source":"ATS","target":"DBT","count":1},{"source":"ATS","target":"INT","count":3},{"source":"ATS","target":"PDG","count":1},{"source":"ATS","target":"PEG","count":1},{"source":"CAR","target":"APL","count":1},{"source":"CAR","target":"CAR","count":9},{"source":"CAR","target":"COP","count":1},{"source":"CAR","target":"INT","count":9},{"source":"CAR","target":"ITS","count":8},{"source":"IGN","target":"CR","count":4},{"source":"IGN","target":"IGN","count":13},{"source":"IGN","target":"INT","count":5},{"source":"IGN","target":"ITS","count":13},{"source":"IGN","target":"PER","count":4},{"source":"IGN","target":"PRAC","count":1},{"source":"LA","target":"AC","count":1},{"source":"LA","target":"INT","count":1},{"source":"LA","target":"ITS","count":37},{"source":"LA","target":"LA","count":18},{"source":"LA","target":"PER","count":2},{"source":"LOT","target":"LOT","count":18},{"source":"PDG","target":"ABS","count":1},{"source":"PDG","target":"AST","count":4},{"source":"PDG","target":"ATS","count":1},{"source":"PDG","target":"CAR","count":1},{"source":"PDG","target":"CR","count":8},{"source":"PDG","target":"ICS","count":1},{"source":"PDG","target":"IGN","count":3},{"source":"PDG","target":"INT","count":18},{"source":"PDG","target":"ITS","count":6},{"source":"PDG","target":"NRB","count":4},{"source":"PDG","target":"ONT","count":1},{"source":"PDG","target":"PDG","count":24},{"source":"PDG","target":"PER","count":1},{"source":"PEG","target":"CAR","count":1},{"source":"PEG","target":"ENV","count":1},{"source":"PEG","target":"INFRA","count":1},{"source":"PEG","target":"ITS","count":22},{"source":"PEG","target":"LA","count":1},{"source":"PEG","target":"PEG","count":51},{"source":"PEG","target":"PER","count":6},{"source":"RPT","target":"ABS","count":1},{"source":"RPT","target":"APL","count":1},{"source":"RPT","target":"IGN","count":1},{"source":"RPT","target":"INT","count":9},{"source":"RPT","target":"ITS","count":2},{"source":"RPT","target":"RPT","count":11},{"source":"RPT","target":"RTR","count":1},{"source":"RWWA","target":"INT","count":1},{"source":"RWWA","target":"ITS","count":1},{"source":"RWWA","target":"PER","count":1},{"source":"RWWA","target":"RWWA","count":1},{"source":"SCOR","target":"SCOR","count":5},{"source":"SPK","target":"INT","count":4},{"source":"SPK","target":"ITS","count":4},{"source":"SPK","target":"SPK","count":21},{"source":"TS","target":"CS","count":1},{"source":"TS","target":"TS","count":10}]; var nodes_data = [{"name":"ABS","total":11},{"name":"ATS","total":23},{"name":"CR","total":25},{"name":"ENV","total":3},{"name":"INT","total":78},{"name":"ITS","total":177},{"name":"PDG","total":28},{"name":"PER","total":33},{"name":"PRAC","total":4},{"name":"AC","total":2},{"name":"ACDC","total":1},{"name":"APL","total":10},{"name":"LA","total":20},{"name":"PEG","total":53},{"name":"AST","total":21},{"name":"COP","total":2},{"name":"DBT","total":3},{"name":"DEVOPS","total":1},{"name":"IGN","total":18},{"name":"CAR","total":11},{"name":"LOT","total":18},{"name":"ICS","total":1},{"name":"NRB","total":4},{"name":"ONT","total":1},{"name":"INFRA","total":1},{"name":"RPT","total":11},{"name":"RTR","total":1},{"name":"RWWA","total":1},{"name":"SCOR","total":5},{"name":"SPK","total":21},{"name":"CS","total":1},{"name":"TS","total":10}]; //create node size scale var nodeSizeScale = d3.scaleLinear() .domain(d3.extent(nodes_data, d => d.total)) .range([30, 70]); //create node size scale var linkSizeScale = d3.scaleLinear() .domain(d3.extent(links_data, d => d.count)) .range([5, 30]); //create node size scale var linkColourScale = d3.scaleLinear() .domain(d3.extent(links_data, d => d.count)) .range(['blue', 'red']); //document.getElementsByTagName('body')[0].innerHTML = '<div>' + JSON.stringify(nodes_data) + '</div>'; //create somewhere to put the force directed graph var height = 650, width = 950; var svg = d3.select("body").append("svg") .attr('width',width) .attr('height',height); var radius = 15; //set up the simulation and add forces var simulation = d3.forceSimulation() .nodes(nodes_data); var link_force = d3.forceLink(links_data) .id(function(d) { return d.name; }) ; var charge_force = d3.forceManyBody() .strength(-1000); var center_force = d3.forceCenter(width / 2, height / 2); simulation .force("charge_force", charge_force) .force("center_force", center_force) .force("link",link_force) ; //add tick instructions: simulation.on("tick", tickActions ); // THIS CODE SECTION ISN'T RENDERING // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(["dominating"]) .enter().append("marker") .attr("id", function (d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -1.5) .attr("markerWidth", 12) .attr("markerHeight", 12) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5"); //add encompassing group for the zoom var g = svg.append("g") .attr("class", "everything"); // add the curved links to our graphic var link = g.selectAll(".link") .data(links_data) .enter() .append("path") .attr("class", "link") .style('stroke', d => {return linkColourScale(d.count);}) .attr('stroke-opacity', 0.5) .attr('stroke-width', d => {return linkSizeScale(d.count);}); //draw circles for the nodes var node = g.append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes_data) .enter() .append("circle") .attr("r", d => {return nodeSizeScale(d.total);}) .attr("fill", "#333") .on("mouseover", mouseOver(.1)) .on("mouseout", mouseOut); //add text labels var text = g.append("g") .attr("class", "labels") .selectAll("text") .data(nodes_data) .enter().append("text") .style("text-anchor","middle") .style("font-weight", "bold") .style("pointer-events", "none") .attr("dy", ".35em") .text(function(d) { return d.name }); //add drag capabilities var drag_handler = d3.drag() .on("start", drag_start) .on("drag", drag_drag) .on("end", drag_end); drag_handler(node); //add zoom capabilities var zoom_handler = d3.zoom() .on("zoom", zoom_actions); zoom_handler(svg); /** Functions **/ //Drag functions //d is the node function drag_start(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } //make sure you can't drag the circle outside the box function drag_drag(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function drag_end(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } //Zoom functions function zoom_actions(){ g.attr("transform", d3.event.transform) } function tickActions() { //update circle positions each tick of the simulation node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); //update link positions link.attr("d", positionLink); text.attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }); } // links are drawn as curved paths between nodes, // through the intermediate nodes function positionLink(d) { var offset = 30; var midpoint_x = (d.source.x + d.target.x) / 2; var midpoint_y = (d.source.y + d.target.y) / 2; var dx = (d.target.x - d.source.x); var dy = (d.target.y - d.source.y); var normalise = Math.sqrt((dx * dx) + (dy * dy)); var offSetX = midpoint_x + offset * (dy / normalise); var offSetY = midpoint_y - offset * (dx / normalise); return "M" + d.source.x + "," + d.source.y + "S" + offSetX + "," + offSetY + " " + d.target.x + "," + d.target.y; } // build a dictionary of nodes that are linked var linkedByIndex = {}; links_data.forEach(function(d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); // check the dictionary to see if nodes are linked function isConnected(a, b) { return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; } // fade nodes on hover function mouseOver(opacity) { return function(d) { // check all other nodes to see if they're connected // to this one. if so, keep the opacity at 1, otherwise // fade node.style("stroke-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); node.style("fill-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); text.style("fill-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); // also style link accordingly link.style("stroke-opacity", function(o) { return o.source === d || o.target === d ? 1 : opacity; }); link.style("stroke", function(o) { return o.source === d || o.target === d ? linkColourScale(o.count) : "#333"; }); }; } function mouseOut() { node.style("stroke-opacity", 1); node.style("fill-opacity", 1); text.style("fill-opacity", 1); link.style("stroke-opacity", 0.5); link.style("stroke", d => {return linkColourScale(d.count);}); }
I have applied the same code changes in the example you referred, to your code and it seems to work fine. The only extra update required was, since you had nodes connecting to itself, I had to apply marker-end property and path length updates only to the filtered set of links. var links_data = [{"source":"ABS","target":"ABS","count":8},{"source":"ABS","target":"ATS","count":1},{"source":"ABS","target":"CR","count":8},{"source":"ABS","target":"ENV","count":1},{"source":"ABS","target":"INT","count":16},{"source":"ABS","target":"ITS","count":9},{"source":"ABS","target":"PDG","count":1},{"source":"ABS","target":"PER","count":4},{"source":"ABS","target":"PRAC","count":3},{"source":"AC","target":"AC","count":1},{"source":"AC","target":"INT","count":9},{"source":"AC","target":"ITS","count":1},{"source":"ACDC","target":"ACDC","count":1},{"source":"ACDC","target":"CR","count":2},{"source":"ACDC","target":"ITS","count":13},{"source":"ACDC","target":"PER","count":4},{"source":"APL","target":"APL","count":8},{"source":"APL","target":"CR","count":3},{"source":"APL","target":"ENV","count":1},{"source":"APL","target":"INT","count":1},{"source":"APL","target":"ITS","count":29},{"source":"APL","target":"LA","count":1},{"source":"APL","target":"PEG","count":1},{"source":"APL","target":"PER","count":3},{"source":"AST","target":"AST","count":17},{"source":"AST","target":"COP","count":1},{"source":"AST","target":"DBT","count":2},{"source":"AST","target":"DEVOPS","count":1},{"source":"AST","target":"IGN","count":1},{"source":"AST","target":"INT","count":2},{"source":"AST","target":"ITS","count":32},{"source":"AST","target":"PDG","count":2},{"source":"AST","target":"PER","count":8},{"source":"ATS","target":"ABS","count":1},{"source":"ATS","target":"ATS","count":21},{"source":"ATS","target":"DBT","count":1},{"source":"ATS","target":"INT","count":3},{"source":"ATS","target":"PDG","count":1},{"source":"ATS","target":"PEG","count":1},{"source":"CAR","target":"APL","count":1},{"source":"CAR","target":"CAR","count":9},{"source":"CAR","target":"COP","count":1},{"source":"CAR","target":"INT","count":9},{"source":"CAR","target":"ITS","count":8},{"source":"IGN","target":"CR","count":4},{"source":"IGN","target":"IGN","count":13},{"source":"IGN","target":"INT","count":5},{"source":"IGN","target":"ITS","count":13},{"source":"IGN","target":"PER","count":4},{"source":"IGN","target":"PRAC","count":1},{"source":"LA","target":"AC","count":1},{"source":"LA","target":"INT","count":1},{"source":"LA","target":"ITS","count":37},{"source":"LA","target":"LA","count":18},{"source":"LA","target":"PER","count":2},{"source":"LOT","target":"LOT","count":18},{"source":"PDG","target":"ABS","count":1},{"source":"PDG","target":"AST","count":4},{"source":"PDG","target":"ATS","count":1},{"source":"PDG","target":"CAR","count":1},{"source":"PDG","target":"CR","count":8},{"source":"PDG","target":"ICS","count":1},{"source":"PDG","target":"IGN","count":3},{"source":"PDG","target":"INT","count":18},{"source":"PDG","target":"ITS","count":6},{"source":"PDG","target":"NRB","count":4},{"source":"PDG","target":"ONT","count":1},{"source":"PDG","target":"PDG","count":24},{"source":"PDG","target":"PER","count":1},{"source":"PEG","target":"CAR","count":1},{"source":"PEG","target":"ENV","count":1},{"source":"PEG","target":"INFRA","count":1},{"source":"PEG","target":"ITS","count":22},{"source":"PEG","target":"LA","count":1},{"source":"PEG","target":"PEG","count":51},{"source":"PEG","target":"PER","count":6},{"source":"RPT","target":"ABS","count":1},{"source":"RPT","target":"APL","count":1},{"source":"RPT","target":"IGN","count":1},{"source":"RPT","target":"INT","count":9},{"source":"RPT","target":"ITS","count":2},{"source":"RPT","target":"RPT","count":11},{"source":"RPT","target":"RTR","count":1},{"source":"RWWA","target":"INT","count":1},{"source":"RWWA","target":"ITS","count":1},{"source":"RWWA","target":"PER","count":1},{"source":"RWWA","target":"RWWA","count":1},{"source":"SCOR","target":"SCOR","count":5},{"source":"SPK","target":"INT","count":4},{"source":"SPK","target":"ITS","count":4},{"source":"SPK","target":"SPK","count":21},{"source":"TS","target":"CS","count":1},{"source":"TS","target":"TS","count":10}]; var nodes_data = [{"name":"ABS","total":11},{"name":"ATS","total":23},{"name":"CR","total":25},{"name":"ENV","total":3},{"name":"INT","total":78},{"name":"ITS","total":177},{"name":"PDG","total":28},{"name":"PER","total":33},{"name":"PRAC","total":4},{"name":"AC","total":2},{"name":"ACDC","total":1},{"name":"APL","total":10},{"name":"LA","total":20},{"name":"PEG","total":53},{"name":"AST","total":21},{"name":"COP","total":2},{"name":"DBT","total":3},{"name":"DEVOPS","total":1},{"name":"IGN","total":18},{"name":"CAR","total":11},{"name":"LOT","total":18},{"name":"ICS","total":1},{"name":"NRB","total":4},{"name":"ONT","total":1},{"name":"INFRA","total":1},{"name":"RPT","total":11},{"name":"RTR","total":1},{"name":"RWWA","total":1},{"name":"SCOR","total":5},{"name":"SPK","total":21},{"name":"CS","total":1},{"name":"TS","total":10}]; //create node size scale var nodeSizeScale = d3.scaleLinear() .domain(d3.extent(nodes_data, d => d.total)) .range([30, 70]); //create node size scale var linkSizeScale = d3.scaleLinear() .domain(d3.extent(links_data, d => d.count)) .range([5, 30]); //create node size scale var linkColourScale = d3.scaleLinear() .domain(d3.extent(links_data, d => d.count)) .range(['blue', 'red']); //document.getElementsByTagName('body')[0].innerHTML = '<div>' + JSON.stringify(nodes_data) + '</div>'; //create somewhere to put the force directed graph var height = 650, width = 950; var svg = d3.select("body").append("svg") .attr('width',width) .attr('height',height); var radius = 15; //set up the simulation and add forces var simulation = d3.forceSimulation() .nodes(nodes_data); var link_force = d3.forceLink(links_data) .id(function(d) { return d.name; }) ; var charge_force = d3.forceManyBody() .strength(-1000); var center_force = d3.forceCenter(width / 2, height / 2); simulation .force("charge_force", charge_force) .force("center_force", center_force) .force("link",link_force) ; //add tick instructions: simulation.on("tick", tickActions ); // THIS CODE SECTION ISN'T RENDERING // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(["dominating"]) .enter().append("marker") .attr('markerUnits', 'userSpaceOnUse') .attr("id", function (d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 0) .attr("refY", 0) .attr("markerWidth", 12) .attr("markerHeight", 12) .attr("orient", "auto-start-reverse") .append("path") .attr("d", "M0,-5L10,0L0,5") .attr("fill", "red"); //add encompassing group for the zoom var g = svg.append("g") .attr("class", "everything"); // add the curved links to our graphic var link = g.selectAll(".link") .data(links_data) .enter() .append("path") .attr("class", "link") .style('stroke', d => {return linkColourScale(d.count);}) .attr('stroke-opacity', 0.5) .attr('stroke-width', d => {return linkSizeScale(d.count);}) .attr("marker-end", function(d) { if(JSON.stringify(d.target) !== JSON.stringify(d.source)) return "url(#dominating)"; }); //draw circles for the nodes var node = g.append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes_data) .enter() .append("circle") .attr("r", d => {return nodeSizeScale(d.total);}) .attr("fill", "#333") .on("mouseover", mouseOver(.1)) .on("mouseout", mouseOut); //add text labels var text = g.append("g") .attr("class", "labels") .selectAll("text") .data(nodes_data) .enter().append("text") .style("text-anchor","middle") .style("font-weight", "bold") .style("pointer-events", "none") .attr("dy", ".35em") .text(function(d) { return d.name }); //add drag capabilities var drag_handler = d3.drag() .on("start", drag_start) .on("drag", drag_drag) .on("end", drag_end); drag_handler(node); //add zoom capabilities var zoom_handler = d3.zoom() .on("zoom", zoom_actions); zoom_handler(svg); /** Functions **/ //Drag functions //d is the node function drag_start(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } //make sure you can't drag the circle outside the box function drag_drag(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function drag_end(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } //Zoom functions function zoom_actions(){ g.attr("transform", d3.event.transform) } function tickActions() { //update circle positions each tick of the simulation node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); //update link positions link.attr("d", positionLink1); link.filter(function(d){ return JSON.stringify(d.target) !== JSON.stringify(d.source); }) .attr("d",positionLink2); text.attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }); } function positionLink1(d) { var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; } // recalculate and back off the distance function positionLink2(d) { // length of current path var pl = this.getTotalLength(), // radius of circle plus marker head r = nodeSizeScale(d.target.total)+ 12, //12 is the "size" of the marker Math.sqrt(12**2 + 12 **2) // position close to where path intercepts circle m = this.getPointAtLength(pl - r); var dx = m.x - d.source.x, dy = m.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y; } // build a dictionary of nodes that are linked var linkedByIndex = {}; links_data.forEach(function(d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); // check the dictionary to see if nodes are linked function isConnected(a, b) { return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; } // fade nodes on hover function mouseOver(opacity) { return function(d) { // check all other nodes to see if they're connected // to this one. if so, keep the opacity at 1, otherwise // fade node.style("stroke-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); node.style("fill-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); text.style("fill-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); // also style link accordingly link.style("stroke-opacity", function(o) { return o.source === d || o.target === d ? 1 : opacity; }); link.style("stroke", function(o) { return o.source === d || o.target === d ? linkColourScale(o.count) : "#333"; }); }; } function mouseOut() { node.style("stroke-opacity", 1); node.style("fill-opacity", 1); text.style("fill-opacity", 1); link.style("stroke-opacity", 0.5); link.style("stroke", d => {return linkColourScale(d.count);}); } body { width:99%; height:100%; background: #111111; } .svg { width:1000; height:1000; } .link { fill: none; } .labels { font-family: Arial; fill: white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
D3 force layout graph zoom functionality
I new in js and can't solve problem i faced by myself, so I will be glad for any advices or helps. In my project I created force layout graph. What I should do is to add zoom in and zoom out functionality for my graph. I created little example to show what problem I faced. function myGraph(el){ this.addNode = function (id, category, opened, parentT, name, nodeType, countLinks, dob, country, childsCount) { var parent = []; parent.push(parentT); nodes.push({ "id": id, "category": category, "opened": opened, "parent": parent, "name": name, "nodeType": nodeType, "countLinks": countLinks, "dob": dob, "country": country, "childCount": childsCount }); update(); } this.addLink = function (sourceId, targetId, type) { var sourceNode = findNode(sourceId); var targetNode = findNode(targetId); if ((sourceNode !== undefined) && (targetNode !== undefined)) { links.push({ "source": sourceNode, "target": targetNode, "type": type }); update(); } } var findNode = function (id) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].id === id) return nodes[i] }; } var w = 360, h = 200; var vis = this.vis = d3.select(el).append("svg:svg") .attr("id", "mySvg") .attr("width", w) .attr("height", h) .attr("viewBox", "0 0 " + w + " " + h) .call(d3.behavior.zoom().scaleExtent([-0.5, 1]).on("zoom", redraw)) var g = vis.append('svg:g') function redraw(e) { if (!e) e = window.event; if (e.type == "wheel" || e.shiftKey == true) { g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); } } var force = d3.layout.force() .gravity(0.05) .distance(100) .charge(-200) .size([w, h]); var nodes = force.nodes(), links = force.links(); var hiddenType = []; g.append("g").attr("class", "links"); g.append("g").attr("class", "nodes"); var update = function () { for (var i=0; i<links.length; i++) { if (i != 0 && links[i].source == links[i-1].source && links[i].target == links[i-1].target) { links[i].linknum = links[i-1].linknum + 1; } else {links[i].linknum = 1;}; }; var myLink = g.select(".links").selectAll(".link"); myLink.remove(); var link = g.select(".links").selectAll(".link") .data(links); link.enter().append("polyline") .attr("class", "link") .attr("type", function (d) { return "link_" + d.type; }) link.exit().remove(); var node = g.select(".nodes").selectAll(".node") .data(nodes, function (d) { return d.id; }) var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("links", function (d) { return d.countLinks }) .attr("type", function (d) { return d.nodeType }) .on("mousedown", mousedown) .call(force.drag); nodeEnter.append("circle") .attr("r", "10px") .attr("x", "-8px") .attr("y", "-8px") .attr("width", "16px") .attr("height", "16px") .style("fill", "white") .style("stroke", "#ccc") nodeEnter.append("rect") .attr("pointer-events", "none") .attr("class", "shape") .attr("width", "250px") .attr("height", "150px") .style("fill", "transparent") nodeEnter.append("text") .attr("pointer-events", "none") .attr("class", function (d) { return "nodetext_" + d.id }) .attr("y", "-10") .text(function (d) { return d.id }) nodeEnter.append("title") .text(function (d) { return d.id }); node.exit().remove(); function mousedown(d) { d.fixed = true; } force.on("tick", function () { link.attr("points", function(d){ if (d.source.y > d.target.y) { return d.source.x + "," + d.source.y + " " + (d.source.x + ((d.target.x - d.source.x) / 2)) + "," + (d.target.y + ((d.source.y - d.target.y) / 2) + (15 * (d.linknum - 1))) + " " + d.target.x + "," + d.target.y; } if (d.source.y < d.target.y) { return d.source.x + "," + d.source.y + " " + (d.source.x + ((d.target.x - d.source.x) / 2)) + "," + (d.source.y + ((d.target.y - d.source.y) / 2) + (15 * (d.linknum - 1))) + " " + d.target.x + "," + d.target.y; } }) node.attr("transform", function (d) { if (d.fixed !== true) { return "translate(" + d.x + "," + d.y + ")"; } else { return "translate(" + d.px + "," + d.py + ")"; } }); }); force.start(); } update(); } graph = new myGraph("#graph"); graph.addNode("A") graph.addNode("B") graph.addNode("C") graph.addLink("A", "B") graph.addLink("A", "C") https://jsfiddle.net/IMykytiv/nsxL8c52/ So problem is: In my graph users can drag nodes in any direction, after that node's position becomes fixed. When I added zooming I can't drag nodes because zooming works first, so I added condition that zoom works only when shift key is pressed. So now I can both drag nodes and zoom. But now I faced problem that if I drag node and try to zoom with mouse wheel it changed transform not from mouse position but from another point and I can't understand why. If I remove shift key condition zooming works as expected.
I finaly found solution and it was preaty easy. Instead of adding condition with shift key pressed all I need to do is to prevent trigger zoom function on start draggin node event: var drag = force.drag() .on("dragstart", function (d) { d3.event.sourceEvent.stopPropagation(); }); Updated jsfiddle here: https://jsfiddle.net/IMykytiv/nsxL8c52/2/ Hope that it will be useful for anyone :)
d3.js radial treed downloads differently to svg
I was creating a radial tree and trying to download it to SVG but it has some issues It downloads with those black thick strokes which are not displayed on the webpage. Any idea where the black lines are coming from? var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(" + (width / 2 - 15) + "," + (height / 2 + 25) + ")"); var stratify = d3.stratify() .parentId(function(d) { console.log(d.id.substring(0, d.id.lastIndexOf("."))); return d.id.substring(0, d.id.lastIndexOf(".")); }); var tree = d3.cluster() tree.size([360, 360]) tree.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); d3.csv("flare.csv", function(error, data) { if (error) throw error; var root = tree(stratify(data) .sort(function(a, b) { return (a.height - b.height + 100) || a.id.localeCompare(b.id); })); var link = g.selectAll(".link") .data(root.descendants().slice(1)) .enter().append("path") .attr("class", "link") .attr("d", function(d) { return "M" + project(d.x, d.y) + "C" + project(d.x, (d.y + d.parent.y) / 2) + " " + project(d.parent.x, (d.y + d.parent.y) / 2) + " " + project(d.parent.x, d.parent.y); }); link.attr('stroke', function(d) { if (d.id.startsWith("Mother.Biological")){ return "#386eff"; } if (d.id.startsWith("Mother.Env")){ return "#45cbf2"; } else return '#70f2ad'; }); var node = g.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", function(d) { return "node" + (d.children ? " node-- internal" : " node--leaf"); }) .attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; }); node.append("circle") .attr("r", function(d) { console.log(d.value); if (d.id == "Mother") return 4.4; else return 2.4; } ) .style('fill', function(d) { if (d.id.startsWith("Mother.Biological")){ return "#386eff"; } if (d.id.startsWith("Mother.Env")){ return "#45cbf2"; } if (d.id.startsWith("Mother.Biological")){ return "#386eff"; } if (d.id.startsWith("Mother.Form")){ return '#70f2ad'; } d.color = 'red'; return d.color}); node.append("text") .attr("dy", ".31em") .attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; }) .style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; }) .attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; }) .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); }); }); function project(x, y) { var angle = (x - 90) / 180 * Math.PI, radius = y; return [radius * Math.cos(angle), radius * Math.sin(angle)]; } d3.select("#download") .on("mouseover", writeDownloadLink); function writeDownloadLink(){ var html = d3.select("svg") .attr("title", "svg_title") .attr("version", 1.1) .attr("xmlns", "http://www.w3.org/2000/svg") .node().parentNode.innerHTML; d3.select(this) .attr("href-lang", "image/svg+xml") .attr("href", "data:image/svg+xml;base64,\n" + btoa(html)) .on("mousedown", function(){ if(event.button != 2){ d3.select(this) .attr("href", null) .html("Use right click"); } }) .on("mouseout", function(){ d3.select(this) .html("Download"); }); }; It looks ok in any browser but when I download it and convert it to SVG or EFM it comes back with those lines.
Page that you provided contains style tag. I'm not sure how exactly do you export SVG, but some css rules seems to be lost along the way. In similar case I managed to get current css properties and put them into style property: d3.selectAll('...').each(function() { var that = d3.select(this); ['stroke', 'stroke-width', 'opacity', 'fill', ...].forEach(function(property) { that.style(property, that.style(property)) }); }); Hope this will help you.
d3js arc height tweening
I am trying to tween the heights of the various arcs in this chart jsfiddle http://jsfiddle.net/0ht35rpb/193/ I've seen this example but not sure how to start implementing it. d3 how to tween inner radius for pie chart I've seen this sample on various tweening maths. http://andyshora.com/tweening-shapes-paths-d3-js.html var $this = $("#chart"); var data = [{ "label": "Overall Stress", "value": 89 },{ "label": "Emotional Stress", "value": 1 },{ "label": "Behavioural difficulties", "value": 29 },{ "label": "hyperactivity and concetration", "value": 89 },{ "label": "Getting along with others", "value": 19 },{ "label": "Keen and helpful behaviour", "value": 45 }]; var w = 350; var h = 350; function colores_google(n) { var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#c12fff"]; return colores_g[n % colores_g.length]; } var arcGenerator = { radius: 70, oldData: "", init: function(el, data, w, h){ var stardata = [ { "segments": data } ]; this.el = el; var clone = $.extend(true, {}, stardata); this.oldData = this.setData(clone, false); this.setup(el, this.setData(stardata, true), w, h); }, update: function(data){ var clone = $.extend(true, {}, data); this.animate(this.setData(data, true)); this.oldData = this.setData(clone, false); }, animate: function(data){ var that = this; var chart = d3.select(this.el); that.generateArcs(chart, data); }, setData: function(data, isSorted){ var diameter = 2 * Math.PI * this.radius; var localData = new Array(); var displacement = 0; var oldBatchLength = 0; $.each(data, function(index, value) { var riseLevels = value.segments; var riseLevelCount = riseLevels.length; if(oldBatchLength !=undefined){ displacement+=oldBatchLength; } var arcBatchLength = 2*Math.PI; var arcPartition = arcBatchLength/riseLevelCount; $.each(riseLevels, function( ri, value ) { var startAngle = (ri*arcPartition); var endAngle = ((ri+1)*arcPartition); if(index!=0){ startAngle+=displacement; endAngle+=displacement; } riseLevels[ri]["startAngle"] = startAngle; riseLevels[ri]["endAngle"] = endAngle; }); oldBatchLength = arcBatchLength; localData.push(riseLevels); }); var finalArray = new Array(); $.each(localData, function(index, value) { $.each(localData[index], function(i, v) { finalArray.push(v); }); }); return finalArray; }, generateArcs: function(chart, data){ var that = this; //_arc paths //append previous value to it. $.each(data, function(index, value) { if(that.oldData[index] != undefined){ data[index]["previousEndAngle"] = that.oldData[index].endAngle; } else{ data[index]["previousEndAngle"] = 0; } }); var arcpaths = that.arcpaths.selectAll("path") .data(data); arcpaths.enter().append("svg:path") .style("fill", function(d, i){ return colores_google(i); }) .transition() .ease(d3.easeElastic) .duration(750) .attrTween("d", arcTween); arcpaths.transition() .ease(d3.easeElastic) .style("fill", function(d, i){ return colores_google(i); }) .duration(750) .attrTween("d",arcTween); arcpaths.exit().transition() .ease(d3.easeBounce) .duration(750) .attrTween("d", arcTween) .remove(); function arcTween(b) { var prev = JSON.parse(JSON.stringify(b)); prev.endAngle = b.previousEndAngle; var i = d3.interpolate(prev, b); return function(t) { return that.getArc()(i(t)); }; } //_arc paths var r = that.radius + 40; var ir = that.radius - 30; var legendHeight = this.legendPaddingTop; var ySpace = 18; var labelPadding = 3; //draw labels legends var labels = that.label_group.selectAll("text.labels") .data(data); labels.enter().append("svg:text") .attr("class", "labels") .attr("dy", function(d, i) { legendHeight+=ySpace; return (ySpace * i) + labelPadding; }) .attr("text-anchor", function(d) { return "start"; }) .text(function(d) { return d.label; }); labels.exit().remove(); var legend = that.legend_group.selectAll("circle").data(data); legend.enter().append("svg:circle") .attr("cx", 100) .attr("cy", function(d, i) { return ySpace * i; }) .attr("r", 7) .attr("width", 18) .attr("height", 18) .style("fill", function(d, i) { return colores_google(i); }); legend.exit().remove(); //reset legend height //console.log("optimum height for legend", legendHeight); $this.find('.legend').attr("height", legendHeight); /* //__labels var starlabels = that.starlabels.selectAll("text") .data(data); starlabels.enter() .append("text") .attr("text-anchor", "middle") starlabels.text(function(d) { return d.label; }) .each(function(d) { var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; d.cx = Math.cos(a) * (ir+((r-ir)/2)); d.cy = Math.sin(a) * (ir+((r-ir)/2)); d.x = d.x || Math.cos(a) * (r + 20); d.y = d.y || Math.sin(a) * (r + 20); var bbox = this.getBBox(); d.sx = d.x - bbox.width/2 - 2; d.ox = d.x + bbox.width/2 + 2; d.sy = d.oy = d.y + 5; }) .transition() .duration(300) .attr("x", function(d) { var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; return d.x = Math.cos(a) * (r + 20); }) .attr("y", function(d) { var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; return d.y = Math.sin(a) * (r + 20); }); starlabels.exit().remove(); //__labels //__pointers that.pointers.append("defs").append("marker") .attr("id", "circ") .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("refX", 3) .attr("refY", 3) .append("circle") .attr("cx", 3) .attr("cy", 3) .attr("r", 3) .style("fill", "#005a70"); var pointers = that.pointers.selectAll("path.pointer") .data(data); pointers.enter() .append("path") .attr("class", "pointer") .style("fill", "none") .style("stroke", "#005a70") .attr("marker-end", "url(#circ)"); pointers .transition() .duration(300) .attr("d", function(d) { if(d.cx > d.ox) { return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; } else { return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; } }); pointers.exit().remove(); //__pointers */ }, setup: function(el, data, w, h){ var chart = d3.select(el).append("svg") .attr("class", "chart") .attr("width", w) .attr("height", h) var arcchart = chart.append("g") .attr("class", "starchart") .attr("transform", "translate("+w/4+","+h/2+")"); this.arcpaths = arcchart.append("g") .attr("class", "arcpaths"); this.starlabels = arcchart.append("g") .attr("class", "labels"); this.pointers = arcchart.append("g") .attr("class", "pointer"); var margin = 25; var padding = 15; this.legendPaddingTop = 30; var legend = chart.append("g") .attr("class", "legend") .attr("width", w/3) .attr("height", h - 50) .attr("transform", "translate(" + (w-20) + "," + (h/4) + ")"); this.label_group = legend.append("g") .attr("class", "label_group") .attr("transform", "translate(" + (-(w / 3) + 20) + "," + 0 + ")"); this.legend_group = legend.append("g") .attr("class", "legend_group") .attr("transform", "translate(" + (-(w / 3) - 100) + "," + 0 + ")"); var radiusControl = 16; this.dataset = "big";//more than 2 results if(data.length <=2){ radiusControl = 65;//make the radius smaller to compromise with there being less results this.dataset = "small"; } this.radius = w/4 - radiusControl; this.generateArcs(chart, data); }, getArc: function(){ var that = this; var arc = d3.arc() .innerRadius(function(d, i){ var threshold = 50; if(that.dataset == "small"){ threshold = 20; } return that.radius-threshold;//negative makes it deeper }) .outerRadius(function(d){ var maxHeight = 120; var ratio = (d.value/maxHeight * 100)+that.radius; return ratio; }) .startAngle(function(d, i){ return d.startAngle; }) .endAngle(function(d, i){ return d.endAngle; }); return arc; } } arcGenerator.init($this[0], data, w, h);
In your attrTween function instead of interpolating angle interpolate the value: function arcTween(b) { var prev = JSON.parse(JSON.stringify(b)); prev.endAngle = b.previousEndAngle; <-- incorrect var i = d3.interpolate(prev, b); Interpolate outer radius like below function arcTween(b) { var prev = JSON.parse(JSON.stringify(b)); prev.value = 0; var i = d3.interpolate(prev, b); working code here
How to add remove certain json arrays from dropdown
I have a sunburst which has following layers of data world=>continents=>countries=>fuels NOw I want to include names of elements only until countries and not names of fuels. With my code I can add names of all elements in the dropdown but not sure how to remove names of fuels from the dropdown. Fiddle: http://jsfiddle.net/8wd2xt9n/14/ Full code: var width = 960, height = 700, radius = Math.min(width, height) / 2; var b = { w: 130, h: 30, s: 3, t: 10 }; var x = d3.scale.linear() .range([0, 2 * Math.PI]); var y = d3.scale.sqrt() .range([0, radius]); var changeArray = [100, 80, 60, 0, -60, -80, -100]; var colorArray = ["#67000d", "#b73e43", "#d5464a", "#f26256", "#fb876e", "#fca78e", "#fcbba1", "#fee0d2", "#fff5f0"]; var svg = d3.select("#diagram").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")"); var partition = d3.layout.partition() .value(function (d) { return d.Total; }); var arc = d3.svg.arc() .startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function (d) { return Math.max(0, y(d.y)); }) .outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); }); console.log(arc) function checkIt(error, root) { initializeBreadcrumbTrail(); //intilaize dropdown if (error) throw error; var g = svg.selectAll("g") .data(partition.nodes(root)) .enter().append("g"); var path = g.append("path") .attr("d", arc) .style("fill", function (d) { var color; if (d.Total_Change > 100) { color = colorArray[0] } else if (d.Total_Change > 0 && d.Total_Change < 100) { color = colorArray[1] } else { color = colorArray[2] } d.color = color; return color }) .on("click", click) .on("mouseover", mouseover); var tooltip = d3.select("body") .append("div") .attr("id", "tooltips") .style("position", "absolute") .style("background-color", "#fff") .style("z-index", "10") .style("visibility", "hidden"); g.on("mouseover", function (d) { return tooltip.style("visibility", "visible") .html("<div class=" + "tooltip_container>" + "<h4 class=" + "tooltip_heading>" + d.name.replace(/[_-]/g, " ") + "</h4>" + "<br>" + "<p> Emissions 2013:" + " " + "<br>" + d.Total + " " + "<span>in Million Tons</span></p>" + "<br>" + "<p> Change in Emissions: <span>" + (d.Total_Change / d.Total * 100).toPrecision(3) + "%" + "</span></p>" + "</div>"); }) .on("mousemove", function () { return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); }) .on("mouseout", function () { return tooltip.style("visibility", "hidden"); }); //creating a dropdown var dropDown = d3.select("#dropdown_container") .append("select") .attr("class", "selection") .attr("name", "country-list"); var nodeArr = partition.nodes(root); var options = dropDown.selectAll("option") .data(nodeArr) .enter() .append("option"); options.text(function (d) { var prefix = new Array(d.depth + 1); var dropdownValues = d.name.replace(/[_-]/g, " "); return dropdownValues; }).attr("value", function (d) { var dropdownValues = d.name; return dropdownValues; }); // transition on click function click(d) { // fade out all text elements console.log(d) path.transition() .duration(750) .attrTween("d", arcTween(d)) .each("end", function (e, i) { // check if the animated element's data e lies within the visible angle span given in d if (e.x >= d.x && e.x < (d.x + d.dx)) { // get a selection of the associated text element var arcText = d3.select(this.parentNode).select("text"); // fade in the text element and recalculate positions arcText.transition().duration(750) .attr("opacity", 1) .attr("transform", function () { return "rotate(" + computeTextRotation(e) + ")" }) .attr("x", function (d) { return y(d.y); }); } }); }; d3.select(".selection").on("change", function changePie() { var value = this.value; var index = this.selectedIndex; var dataObj = nodeArr[index]; path[0].forEach(function (p) { var data = d3.select(p).data(); //get the data from the path if (data[0].name === value) { console.log(data) click(data[0]);//call the click function } }); console.log(this.value + " :c " + dataObj["Iron and steel"] + " in " + (dataObj.parent && dataObj.parent.name)); }); }; d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/743b3964d1dcc0b005ec2b024414877a36b0bd33/data.json", checkIt); d3.select(self.frameElement).style("height", height + "px"); // Interpolate the scales! function arcTween(d) { var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), yd = d3.interpolate(y.domain(), [d.y, 1]), yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]); return function (d, i) { return i ? function (t) { return arc(d); } : function (t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; }; } function initializeBreadcrumbTrail() { // Add the svg area. var trail = d3.select("#sequence").append("svg:svg") .attr("width", width) .attr("height", 50) .attr("id", "trail"); // Add the label at the end, for the percentage. trail.append("svg:text") .attr("id", "endlabel") .style("fill", "#000"); } function breadcrumbPoints(d, i) { var points = []; points.push("0,0"); points.push(b.w + ",0"); points.push(b.w + b.t + "," + (b.h / 2)); points.push(b.w + "," + b.h); points.push("0," + b.h); if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex. points.push(b.t + "," + (b.h / 2)); } return points.join(" "); } // Update the breadcrumb trail to show the current sequence and percentage. function updateBreadcrumbs(nodeArray) { // Data join; key function combines name and depth (= position in sequence). var g = d3.select("#trail") .selectAll("g") .data(nodeArray, function (d) { return d.name.replace(/[_-]/g, " ") + d.Total; }); // Add breadcrumb and label for entering nodes. var entering = g.enter().append("svg:g"); entering.append("svg:polygon") .attr("points", breadcrumbPoints) .style("fill", "#d3d3d3"); entering.append("svg:text") .attr("x", (b.w + b.t) / 2) .attr("y", b.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(function (d) { return d.name.replace(/[_-]/g, " "); }); // Set position for entering and updating nodes. g.attr("transform", function (d, i) { return "translate(" + i * (b.w + b.s) + ", 0)"; }); // Remove exiting nodes. g.exit().remove(); // Now move and update the percentage at the end. d3.select("#trail").select("#endlabel") .attr("x", (nodeArray.length + 0.5) * (b.w + b.s)) .attr("y", b.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle"); // Make the breadcrumb trail visible, if it's hidden. d3.select("#trail") .style("visibility", ""); } function getAncestors(node) { var path = []; var current = node; while (current.parent) { path.unshift(current); current = current.parent; } return path; } function mouseover(d) { var sequenceArray = getAncestors(d); updateBreadcrumbs(sequenceArray); } Code that creates dropdown /creating a dropdown var dropDown = d3.select("#dropdown_container") .append("select") .attr("class", "selection") .attr("name", "country-list"); var nodeArr = partition.nodes(root); var options = dropDown.selectAll("option") .data(nodeArr) .enter() .append("option"); options.text(function (d) { var prefix = new Array(d.depth + 1); var dropdownValues = d.name.replace(/[_-]/g, " "); return dropdownValues; }).attr("value", function (d) { var dropdownValues = d.name; return dropdownValues; }); Data structure can be viewed here
As you are grabbing the values of the dropdown menu from the nodes of the partition, you have the depth of the nodes at hand when setting up the dropdown, thus you can filter: var nodeArr = partition.nodes(root); var options = dropDown.selectAll("option") .data(nodeArr.filter(function(d){return d.depth < 3;})) .enter() .append("option"); I hope that helps! (see fiddle)
I would just pre-process the data. In the original root structure you know the countries are 2 levels down so: var countries = []; root.children.forEach(function (c){ c.children.forEach(function (d){ countries.push(d.name.replace(/[_-]/g, " ")); }); }); And the dropdown becomes: var options = dropDown.selectAll("option") .data(countries) .enter() .append("option"); options.text(function (d) { return d; }).attr("value", function (d) { return d; }); Updated fiddle.