Hi i am trying to use force layout of d3js... I am creating g elements with rect and text inside them. And apply force but they overlap. I think it does not solve the size of the rect. What am i doing wrong?
var force = d3.layout.force()
.nodes(nodes)
.links([])
.size([w, h]);
force.on("tick", function(e) {
vis.selectAll("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
nodes.push({
w: 100,
h: 50,
val: 'dada'
});
nodes.push({
w: 100,
h: 50,
val: 'zona'
});
// Restart the layout.
force.start();
var node = vis.selectAll("g")
.data(nodes)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(force.drag);
node.append("rect")
.attr("width", function(d) { return d.w; })
.attr("height", function(d) { return d.h; })
.style("fill", "#eee")
.style("stroke", "white")
.style("stroke-width", "1.5px")
node.append("text")
.text(function(d) { return d.val; })
.style("font-size", "12px")
.attr("dy", "1em")
There are attributes that you can set in your d3.layout.declaration() that will allow you to deal with the overlap, such as:
var force = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(0.05)
.charge(-1500)
.linkDistance(100)
.friction(0.5)
.size([w, h]);
Important note: I borrowed data from somewhere else and ran the code. So, the values above will need to be tweaked by you. Hope this helps.
Related
I have three charts in different positions. The tooltips look fine for my first chart, but for the other two the tooltips show in the first chart.
I've tried BBbox and getboundindclientrect(), and none of them work for d3.select(this).
// This is my chart module, I'm struggling to get xPosition and yPosition right.
function chart(selection) {
innerWidth = width - margin.left - margin.right,
innerHeight = height - margin.top - margin.bottom,
selection.each(function (data) {
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var svgEnter = svg.enter().append("svg");
var gEnter = svgEnter.append("g");
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class", "y axis");
// Update the outer dimensions.
svg.merge(svgEnter).attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.merge(svgEnter).select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
xScale.rangeRound([0, innerWidth])
.domain(data.map(xValue)); //xValue = function(d) { return d[0]; }
yScale.rangeRound([innerHeight, 0])
.domain([0, d3.max(data, yValue)]);
g.select(".x.axis")
.attr("transform", "translate(0," + innerHeight + ")")
.call(d3.axisBottom(xScale));
g.select(".y.axis")
.call(d3.axisLeft(yScale).ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
var bars = g.selectAll(".bar")
.data(function (d) { return d; });
bars.enter().append("rect")
.attr("class", "bar")
.merge(bars)
.attr("x", X) // function X(d) {return xScale(xValue(d));}
.attr("y", Y)
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return innerHeight - Y(d); })
.attr("fill", "rgb(0, 18, 65") // International Klein blue
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth()/2; // + parseFloat(bars.node().getBBox().x);
var yPosition = parseFloat(d3.select(this).attr("y"))/2 + innerHeight/2;
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(yValue(d));
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
.on("click", onClick);
bars.exit().remove();
});
}
I'd like to get the tooltips on top of my rectangles when I place the mouse over them.
I want to highlight a bar with April (value in x-axis) with a square box. but I am not getting a approach to do the same.
tried getting the co-ordinates of the respected bar, but unable to find a solution for the same
Unable to find the co-ordinates of the respective bar which I need to highlight.
what should be the approach for highlighting a bar with a square box in stacked bar chart d3.js v4
createStackedBarChart(130,300,10,60,20,45,"manager-line-graph-2");
function createStackedBarChart(height,width,top,right,bottom,left,id){
var margin = {top: top, right: right, bottom: bottom, left: left };
//console.log("margin"+margin);
var svg = d3.select("#"+id).append("svg"),
width = width - margin.left - margin.right,
height = height - margin.top - margin.bottom,
g = svg.attr("width", "100%")
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.2)
.align(5.0);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#0000FF", "#00FFFF", "#81F781", "#F3F781", "#FE2E2E"]);
var data = [
{"Months": "Feb","Installation": 5,"Product": 10,"Payment": 15,"Billing": 20,"Outage": 25},
{"Months": "March","Installation": 6,"Product": 8,"Payment": 9,"Billing": 15,"Outage": 18},
{"Months": "April","Installation": 9,"Product": 12,"Payment": 24,"Billing": 17,"Outage": 14},
{"Months": "May","Installation": 9,"Product": 12,"Payment": 14,"Billing": 17,"Outage": 14},
{"Months": "June","Installation": 9,"Product": 12,"Payment": 15,"Billing": 11,"Outage": 10}
];
// fix pre-processing
var keys = [];
for (key in data[0]){
if (key != "Months")
keys.push(key);
}
console.log("value of keys are " + keys);
data.forEach(function(d){
d.total = 0;
keys.forEach(function(k){
d.total += d[k];
})
});
//data.sort(function(a, b) {
//return b.total - a.total;
//});
x.domain(data.map(function(d) {
return d.Months;
}));
y.domain([0, d3.max(data, function(d) {
return d.total;
})]).nice();
z.domain(keys);
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.enter().append("g")
.attr("fill", function(d) {return z(d.key);})
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) {
return x(d.data.Months);
})
.attr("y", function(d) {
return y(d[1]);
})
.attr("height", function(d) {
return y(d[0]) - y(d[1]);
})
.attr("width", x.bandwidth()-5);
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(5, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks(5).pop()))
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
//legend.append("rect")
//.attr("x", width + 20)
//.attr("width", 10)
//.attr("height", 10)
//.attr("fill", z);
legend.append("circle")
.attr("r",5)
.attr("cx", width+30)
.attr("cy", 0)
.attr("fill",z);
legend.append("text")
.attr("x", width + 88)
.attr("y", 3.5)
.attr("dy", "0.12em")
.text(function(d) {
return`enter code here` d;
});
}
One solution I have used previously is to create an invisible layer of bars for the same data. Then use the .on("mouseover", function...); to make the bars for that data visible again by changing the styles or the fill opacity.
Here is a sample bl.ock with what I mean. It is a grouped bar chart with ordinal scale, but the same could be applied to your data with some tweaking.
https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469
Update May 5, 2018: upon further reading I see your issue is different than the solution I suggested. This link might give you a good starting point of how to use an if statement to selectively highlight particular data.
so you could use the following style for your rect
.style ("fill", function(d) {
if (d.Months === "April") {return "red"} // <== Add these
else { return "black" }
})
I'm learning D3 and having an issue updating my bar chart
let container = d3.select(this)
let x = d3.scaleBand().rangeRound([0, width]).padding(0.1)
let y = d3.scaleLinear().rangeRound([height, 0])
x.domain(data.map(function(d) {
return d.x;
}));
y.domain([0, d3.max(data, function(d) { return d.y; })])
// seems like everytime when there is a new data, a new "g" is appended
let g = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const gEnter = g.selectAll('.bar')
.data(data)
gEnter.exit().remove()
gEnter.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.x)
})
.attr("y", function(d) {
return y(d.y)
})
.attr('fill', barColor)
.attr("width", x.bandwidth())
.attr("height", function(d) {
return height - y(d.y)
})
My goal is to update the graph everytime when there is new data come in, what the above code does is keep appending new graph on top of the current graph.
Somehow I felt I'm missing something trivial.
Any tips will help, thanks.
You should move
let g = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
out of you update function, otherwise, it will create a new g each time this function is executed, make a selectAll on this new g (and find nothing inside it), and execute the enter() selection for all your data.
You can change your structure, for instance, to:
const svg = d3.select(this),
container = svg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let x = d3.scaleBand().rangeRound([0, width]).padding(0.1)
let y = d3.scaleLinear().rangeRound([height, 0])
function update(data){
x.domain(data.map(function(d) {
return d.x;
}));
y.domain([0, d3.max(data, function(d) { return d.y; })])
const gEnter = container.selectAll('.bar')
.data(data)
gEnter.exit().remove()
gEnter.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.x)
})
.attr("y", function(d) {
return y(d.y)
})
.attr('fill', barColor)
.attr("width", x.bandwidth())
.attr("height", function(d) {
return height - y(d.y)
})
}
someAjaxCall().then(data => update(data))
You can check this example made by Mike Bostock to have an overview on how organize your code.
Here i'm working with sample D3 Tree chart in this jsfiddle, & in this tree chart, i need to include Html table inside all nodes including parent and child. So it may look like following:
Refer Sample Image
Same in the image above, i need table inside every node.
D3 JS code:
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var i = 0,
duration = 750,
rectW = 60,
rectH = 30;
var tree = d3.layout.tree().nodeSize([70, 40]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.x + rectW / 2, d.y + rectH / 2];
});
var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000)
.call(zm = d3.behavior.zoom().scaleExtent([1,3]).on("zoom", redraw)).append("g")
.attr("transform", "translate(" + 350 + "," + 20 + ")");
//necessary so that zoom knows where to zoom and unzoom from
zm.translate([350, 20]);
root.x0 = 0;
root.y0 = height / 2;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
d3.select("#body").style("height", "800px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + source.x0 + "," + source.y0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "black")
.attr("stroke-width", 1)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text")
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function (d) {
return d.name;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
nodeUpdate.select("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "black")
.attr("stroke-width", 1)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.x + "," + source.y + ")";
})
.remove();
nodeExit.select("rect")
.attr("width", rectW)
.attr("height", rectH)
//.attr("width", bbox.getBBox().width)""
//.attr("height", bbox.getBBox().height)
.attr("stroke", "black")
.attr("stroke-width", 1);
nodeExit.select("text");
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function (d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.attr("d", function (d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function (d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
//Redraw for zoom
function redraw() {
//console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
I want to create a tree view using d3 like this one http://bl.ocks.org/mbostock/4339083,
but instead of circles in node, I would like to have squares. I found this post that gave me a clue d3.js: modifyng links in a tree layout but not solved my issue. This is my fiddle http://jsfiddle.net/yp7o8wbm/ .
As you can see, all node are not in the correct position.
This is the js code:
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var rectSize = 40;
var i = 0;
var tree = d3.layout.tree().size([height, width]);
var diagonal = d3.svg.diagonal()
.source(function(d) { return {"x":d.source.x, "y":(d.source.y+rectSize)}; })
.target(function(d) { return {"x":(d.target.x), "y":d.target.y}; })
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; });
nodeEnter.append("rect")
.attr("x", function(d) { return d.x ; })
.attr("y", function(d) { return d.y ; })
.attr("width", rectSize)
.attr("height", rectSize);
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", diagonal);
}
I can not realize where is the error in my code?
You are setting the position twice in different ways:
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; //<-- setting it on the parent using a "translate"
});
nodeEnter.append("rect")
.attr("x", function(d) { return d.x ; }) //<-- setting it on the rect using a "x" attribute
Do this instead:
nodeEnter.append("rect")
.attr("x", 0) //<-- x is taken care of by translate
.attr("y", -rectSize/2) //<-- just use y to center the rect
.attr("width", rectSize)
.attr("height", rectSize);
Updated fiddle.