I am using d3.js for bubble chart.its working fine but i need to write custom tool tip for the data which i am showing.currently i just appended one title tag so it just showing one data with tooltip
what if i have more data to show and want to show in form of a table.
Here is my code.
d3.json("data/bubble.json", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
});
Related
I'm following this tutorial for a D3 Circle Pack chart. https://bl.ocks.org/denjn5/6d5ddd4226506d644bb20062fc60b53f
How can I add the text from the ID column of the CSV to each circle?
Instead of creating a circle, you can create a group and have a circle and a text inside it.
So instead of:
// Draw on screen
vSlices.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; })
.attr('r', function (d) { return d.r; });
You would do:
var gNode = vSlices
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
gNode.append("circle").attr("r", function(d) {
return d.r;
});
gNode
.append("text")
.style("font", "10px sans-serif")
.attr("text-anchor", "middle")
.text(function(d) {
return d.data.id;
});
Notice that the translation is being done in the group and the attributes are different.
I hope it helps.
I needed my circle pack to highlight matching circles on a mouseover.
was Not sure why the style is not being applied. The function is being hit ok
working fiddle
var node = canvas.selectAll(".node")
.data(nodes)
.enter().append("g")
//.attr("class", ".node")
.attr("class", function(d) { return ".node " + d.AgtName; })
.attr("transform", function (d) { return "translate(" + d.x + ","
+ d.y + ")"; })
.on("mouseover", function(d) { highlight(d.AgtName); })
.on("mouseout", function(d) { highlight(null); });
function highlight(agtName) {
if (agtName == null) d3.selectAll(".node").classed("active",
false);
else d3.selectAll(".node." + agtName).classed("active", true);
console.log('agt: ' + agtName);
}
Moved the fill color to the node instead of the circle. Changed the class from .node to node
var node = canvas.selectAll(".node")
.data(nodes)
.enter().append("g")
//.attr("class", ".node")
.attr("class", function(d) { return "node " + d.AgtName; })
.attr("transform", function (d) { return "translate(" + d.x + ","
+ d.y + ")"; })
.attr("fill", "steelblue")
.on("mouseover", function(d) { highlight(d.AgtName); })
.on("mouseout", function(d) { highlight(null); });
I created d3 pack layout.Text is added in nodes. Requirement is text should be fit in circular nodes in such way that Text should be at bottom, proportional to node size and should be fit inside node.but text is either overlapping or hides behind another node or not proportional to nodes as in JSFiddle examples
http://jsfiddle.net/oo66o0q0/11/,
http://jsfiddle.net/oo66o0q0/12/,
http://jsfiddle.net/oo66o0q0/13/
.So how to resolve all issue with one code?
function treeLayout(nodes){
var node = diagramLayout.selectAll(".node");
node = node.data(nodes.descendants(), function(d) {
return d.uid;
});
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("height", nodeHeight)
.attr("width", nodeWidth)
nodeEnter.append("circle")
.attr("id", function(d) { return "node-" + d.data.name; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.depth); });
nodeEnter.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
var nodeText = nodeEnter.append("text")
.text(function(d) { return d.data.name; })
.attr("clip-path", function(d) { return "url(#clip-" + d.data.name + ")"; })
.style("text-anchor", "middle")
.style("stroke", "#000")
.style("stroke-width", "0.1px")
.attr("y", function(d) {
return d.r-(d.r/d.data.name.length);
})
.style("font-family", "sans-serif")
.style("font-size", function(d) {
return d.r/(d.data.name.length)+ "px";
})
}
}
I created sankey layout in d3. tooltips added on links and nodes as shown in given Jfiddle http://jsfiddle.net/n7f2dkt0/39/
Issue is Node names disappears when user mouse hover on the node name for sankey layout on edge browser.how to resolve this issue?
screenshot for error
var link = svg.append("g").selectAll(".link")
.data(energy.links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; });
link.on("mouseover", mouseoverLink)
link.on("mouseout", mouseoutLink);
var node = svg.append("g").selectAll(".node")
.data(energy.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(drag);
node.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
node.on("mouseover", mouseover);
node.on("mouseout", mouseout);
I am trying to use General Pattern to update my Pack Layout but have not been successful. Below is my fiddle. So when Randomize Data is clicked the data should be updated.
Here is my full fiddle.
function update() {
root = d3.hierarchy(data)
.sum(function(d) {
return d.size;
})
.sort(function(a, b) {
return b.value - a.value;
});
var node = g.selectAll(".node")
.data(pack(root).descendants())
.enter().append("g")
.attr("class", function(d) {
return d.children ? "node" : "leaf node";
})
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) {
return d.data.name + "\n" + format(d.value);
});
node.append("circle")
.attr("r", function(d) {
return d.r;
});
node.filter(function(d) {
return !d.children;
}).append("text")
.attr("dy", "0.3em")
.text(function(d) {
return d.data.name.substring(0, d.r / 3);
});
}
Your code only have the "enter" selection. You're missing an "update" selection (and eventually an "exit" selection).
The "update" selection can be something like this:
var nodeUpdate = g.selectAll(".node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});;
var circleUpdate = nodeUpdate.select("circle")
.attr("r", function(d) {
return d.r;
});
Check the fiddle: https://jsfiddle.net/or7pLnjp/