我正在基于d3js Sunburst图创建一个信息图。这是我到目前为止的链接： http://www.dinaveprinsky.com/?p=1045
我需要将4个内部圆圈片段（2000年，2005年，2010年，2015年）的痕迹路径上的输出更改为我输入的一串文本。
基本上我需要说的是，在2010年，艺术博览会有68名参与者等等（PS我在2010年为男性和女性参与者提供的数字加起来为67但我需要说的是68）< / p>
这是我正在寻找的图片： desired end result
其余的痕迹路径输出应该保持不变 - 显示馅饼的百分比。
任何帮助都会受到青睐，因为明天早上会上线！
这是我的代码：
// Dimensions of sunburst.
var width = 550;
var height = 550;
var radius = Math.min(width, height) / 2;
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
w: 75, h: 30, s: 3, t: 10
};
// make `colors` an ordinal scale
var colors = d3.scale.ordinal()
.range(["#3182bd","#ff7f0e","#aec7e8","#dbdb8d","#ffbb78","#f7b6d2", "#ff9896","#c5b0d5","#c49c94","#c7c7c7","#7f7f7f","#ff9896", "#17becf","#9467bd","#9edae5","#bcbd22","#636363","#969696", "#bdbdbd","#d9d9d9"]);
// Total size of all segments; we set this later, after loading the data.
var totalSize = 0;
var vis = d3.select("#chart").append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("id", "container")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
// Use d3.csv.parseRows so that we do not need to have a header
// row, and can receive the csv as an array of arrays.
//var text = getText();
//var csv = d3.csv.parseRows(text);
//var json = buildHierarchy(csv);
var json = getData();
createVisualization(json);
// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {
// Basic setup of page elements.
initializeBreadcrumbTrail();
d3.select("#togglelegend").on("click", toggleLegend);
// Bounding circle underneath the sunburst, to make it easier to detect
// when the mouse leaves the parent g.
vis.append("svg:circle")
.attr("r", radius)
.style("opacity", 0);
// For efficiency, filter nodes to keep only those large enough to see.
var nodes = partition.nodes(json)
.filter(function(d) {
return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
});
var uniqueNames = (function(a) {
var output = [];
a.forEach(function(d) {
if (output.indexOf(d.name) === -1) {
output.push(d.name);
}
});
return output;
})(nodes);
// set domain of colors scale based on data
colors.domain(uniqueNames);
// make sure this is done after setting the domain
drawLegend();
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter().append("svg:path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function(d) { return colors(d.name); })
.style("opacity", 1)
.style("stroke", "#fff")
.on("mouseover", mouseover);
// Add the mouseleave handler to the bounding circle.
d3.select("#container").on("mouseleave", mouseleave);
// Get total size of the tree = value of root node from partition.
totalSize = path.node().__data__.value;
}
// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) {
var percentage = (100 * d.value / totalSize).toPrecision(3);
var percentageString = percentage + "%";
if (percentage < 0.1) {
percentageString = "< 0.1%";
}
d3.select("#percentage")
.text(percentageString);
d3.select("#explanation")
.style("visibility", "");
var sequenceArray = getAncestors(d);
updateBreadcrumbs(sequenceArray, percentageString);
// Fade all the segments.
d3.selectAll("path")
.style("opacity", 0.3);
// Then highlight only those that are an ancestor of the current segment.
vis.selectAll("path")
.filter(function(node) {
return (sequenceArray.indexOf(node) >= 0);
})
.style("opacity", 1);
}
// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) {
// Hide the breadcrumb trail
d3.select("#trail")
.style("visibility", "hidden");
// Deactivate all segments during transition.
d3.selectAll("path").on("mouseover", null);
// Transition each segment to full opacity and then reactivate it.
d3.selectAll("path")
.transition()
.duration(1000)
.style("opacity", 1)
.each("end", function() {
d3.select(this).on("mouseover", mouseover);
});
d3.select("#explanation")
.transition()
.duration(1000)
.style("visibility", "hidden");
}
// Given a node in a partition layout, return an array of all of its ancestor
// nodes, highest first, but excluding the root.
function getAncestors(node) {
var path = [];
var current = node;
while (current.parent) {
path.unshift(current);
current = current.parent;
}
return path;
}
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");
}
// Generate a string that describes the points of a breadcrumb polygon.
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, percentageString) {
// 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 + d.depth; });
// Add breadcrumb and label for entering nodes.
var entering = g.enter().append("svg:g");
entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", function(d) { return colors(d.name); });
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; });
// 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")
.text(percentageString);
// Make the breadcrumb trail visible, if it's hidden.
d3.select("#trail")
.style("visibility", "");
}
function drawLegend() {
// Dimensions of legend item: width, height, spacing, radius of rounded rect.
var li = {
w: 75, h: 30, s: 3, r: 3
};
var legend = d3.select("#legend").append("svg:svg")
.attr("width", li.w)
.attr("height", colors.domain().length * (li.h + li.s));
var g = legend.selectAll("g")
.data(colors.domain())
.enter().append("svg:g")
.attr("transform", function(d, i) {
return "translate(0," + i * (li.h + li.s) + ")";
});
g.append("svg:rect")
.attr("rx", li.r)
.attr("ry", li.r)
.attr("width", li.w)
.attr("height", li.h)
.style("fill", function(d) { return colors(d); });
g.append("svg:text")
.attr("x", li.w / 2)
.attr("y", li.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d; });
}
function toggleLegend() {
var legend = d3.select("#legend");
if (legend.style("visibility") == "hidden") {
legend.style("visibility", "");
} else {
legend.style("visibility", "hidden");
}
}
// Take a 2-column CSV and transform it into a hierarchical structure suitable
// for a partition layout. The first column is a sequence of step names, from
// root to leaf, separated by hyphens. The second column is a count of how
// often that sequence occurred.
function buildHierarchy(csv) {
var root = {"name": "root", "children": []};
for (var i = 0; i < csv.length; i++) {
var sequence = csv[i][0];
var size = +csv[i][1];
if (isNaN(size)) { // e.g. if this is a header row
continue;
}
var parts = sequence.split("-");
var currentNode = root;
for (var j = 0; j < parts.length; j++) {
var children = currentNode["children"];
var nodeName = parts[j];
var childNode;
if (j + 1 < parts.length) {
// Not yet at the end of the sequence; move down the tree.
var foundChild = false;
for (var k = 0; k < children.length; k++) {
if (children[k]["name"] == nodeName) {
childNode = children[k];
foundChild = true;
break;
}
}
// If we don't already have a child node for this branch, create it.
if (!foundChild) {
childNode = {"name": nodeName, "children": []};
children.push(childNode);
}
currentNode = childNode;
} else {
// Reached the end of the sequence; create a leaf node.
childNode = {"name": nodeName, "size": size};
children.push(childNode);
}
}
}
return root;
}
function getData() {
return {
"name": "participants",
"children": [
{"name": "2015",
"children": [
{"name": "male",
"children": [
{"name": "20s", "size": 5},
{"name": "30s", "size": 24},
{"name": "40s", "size": 12},
{"name": "50s", "size": 7},
{"name": "60s", "size": 9},
{"name": "70s", "size": 4},
{"name": "80s", "size": 4},
{"name": "deceased", "size": 12}
]
},
{"name": "female",
"children": [
{"name": "20s", "size": 8},
{"name": "30s", "size": 14},
{"name": "40s", "size": 7},
{"name": "50s", "size": 9},
{"name": "60s", "size": 8},
{"name": "70s", "size": 3},
{"name": "80s", "size": 3},
{"name": "deceased", "size": 3}
]
}
]
},
{"name": "2010",
"children": [
{"name": "male",
"children": [
{"name": "20s", "size": 5},
{"name": "30s", "size": 26},
{"name": "40s", "size": 2}
]
},
{"name": "female",
"children": [
{"name": "20s", "size": 11},
{"name": "30s", "size": 20},
{"name": "40s", "size": 3}
]
}
]
},
{"name": "2005",
"children": [
{"name": "male",
"children": [
{"name": "20s", "size": 25},
{"name": "30s", "size": 64},
{"name": "40s", "size": 11},
{"name": "50s", "size": 1},
{"name": "age n/a", "size": 3}
]
},
{"name": "female",
"children": [
{"name": "20s", "size": 8},
{"name": "30s", "size": 43},
{"name": "40s", "size": 4},
{"name": "age n/a", "size": 4}
]
}
]
},
{"name": "2000",
"children": [
{"name": "male",
"children": [
{"name": "20s", "size": 12},
{"name": "30s", "size": 51},
{"name": "40s", "size": 15},
{"name": "60s", "size": 1},
{"name": "age n/a", "size": 6}
]
},
{"name": "female",
"children": [
{"name": "20s", "size": 6},
{"name": "30s", "size": 33},
{"name": "40s", "size": 11},
{"name": "age n/a", "size": 10}
]
}
]
}
]
}
}
答案 0 :(得分：0)
要实现此目的，请在JSON中放置显示文本 目前您的JSON是这样的：
{
"name": "2000",
"children": [{
"name": "male",
"children": [{
"name": "20s",
"size": 12
}, { ....
因此，如果我想添加自己的显示文字，请添加另一个键值（“displayText”：“21参与者”），如下所示：
{
"name": "2000",
"displayText": "21 participants",
"children": [{
"name": "male",
"children": [{
"name": "20s",
"size": 12
}, {
这将确保对于 name：2000 ，您将获得此文本以供显示。 您可以将上述节点添加到您想要查看的节目中。
现在在代码部分鼠标悬停功能中执行
function mouseover(d) {
if (!d.displayText) {
var percentage = (100 * d.value / totalSize).toPrecision(3);
var percentageString = percentage + "%";
if (percentage < 0.1) {
percentageString = "< 0.1%";
}
} else { //handeling our key value passed for display
percentageString = d.displayText;
}
function updateBreadcrumbs(nodeArray, percentageString)内的最后更改:)使得endlabel左对齐，如
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", "left")//make it left aalligned
.text(percentageString);
完整的工作代码here
希望这有帮助！