Javascript D3.js条形图，拆分文本

我有D3.js条形图，我想在上面显示数组中的数字。每个条都有自己的数字数组，比如说，

[12,34,65]

。我可以在每个条的顶部显示数组作为文本，但是我想将每个数组拆分，并将每个数字显示到顶部，因此对于<代码>（12, 34, 65）< /代码>栏，在底部将是代码< 12 > /代码>，然后在代码中间>代码> 34 /代码>顶部和<代码> 65 < /代码>顶部。如何做到这一点？到目前为止，我有这样的代码，它只在每个条的顶部显示数组：

        g.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                return d;
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "white")
           .attr("text-anchor", "middle")
           .attr("x", function(d, i) {
                return ...;
           })          
           .attr("y", function(d) {
                return ...;
           });

---

其中，

dataset

是一个数组数组<代码>d将对应于

[12,34,65]

。我需要一种方法将其拆分为单个数字，并为每个数字指定

y

。同时，显然，

x

对于每个条都应该保持不变。还需要通过绘制线b/w编号或更好地通过更改与数字对应的每个段的颜色将每个条分割成与每个数字对应的部分。

好的，我有一个数据集，其中我有一个数组形式的标签，正如您所说，每个条都有自己的带有数字的数组，比如，

[12，34，65]

要在条上附加标签，请执行以下操作

var rects = svg.selectAll(".bar")
    .data(data)
    .enter().append("g");
//make the bars
rects.append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {
    return x(d.letter);
})
    .attr("width", x.rangeBand())
    .attr("y", function (d) {
    return y(d.frequency);
})
    .attr("height", function (d) {
    return height - y(d.frequency);
});
//text @ the top
rects.append("text")
    .attr("x", function (d) {
    return x(d.letter) + x.rangeBand() / 2;
})
    .attr("y", function (d) {
    return y(d.frequency) + 10;
}).attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em")
    .text(function (d) {
    return d.label[0];
});
//text @ the middle
rects.append("text")
    .attr("x", function (d) {
    return x(d.letter) + x.rangeBand() / 2;
})
    .attr("y", function (d) {
    return (height + y(d.frequency))/2;
}).attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em")
    .text(function (d) {
    return d.label[1];
});
//text @ the bottom
rects.append("text")
    .attr("x", function (d) {
    return x(d.letter) + x.rangeBand() / 2;
})
    .attr("y", function (d) {
    return height - 10;
}).attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em")
    .text(function (d) {
    return d.label[2];
});

工作代码

---

希望这有帮助

要解决您的问题，您需要处理，即，您需要首先为每个堆叠条创建一个组：

var stacks = root.selectAll("g.stack")
.data(dataset)
.enter()
.append("g").attr("class","stack")

然后为每个堆栈创建一个新的选择，通过使用新的

data

函数从父数据中提取嵌套数组，将嵌套数组作为数据

var bars = stacks.selectAll("g.bar")
.data(function(d, i) { return d; })
.enter().append(...)

对于堆栈中的每个条，您可以使用不同的颜色，例如使用

d3.scale.category10

以下是完整的示例：

var root=d3.选择全部（“svg>g#root”）
var数据集=[[10,20,50]，[70,40,10]，[20,40,10]]
var color=d3.scale.category10（）
dataset.forEach（函数（d）{
d、 排序（函数（a，b）{返回b-a；}）
})
var stacks=root.selectAll（“g.stack”）
.数据（数据集）
.输入（）
.append（“g”）.attr（“类”、“堆栈”）
.attr（“转换”，函数（d，i）{
返回“translate（0）”+（i*30）+>”
})
变量条=堆栈。选择全部（“g.bar”）
.data（函数（d，i）{返回d；}）
.输入（）
.附加（“g”）.attr（“类”、“条”）
var barWidth=函数（d，i）{返回d*2}
var barColor=函数（d，i）{返回颜色（i）}
条。附加（“rect”）
.attr（“高度”、“20”）
.attr（“x”、“0”）
.attr（“y”、“0”）
.attr（“宽度”，barWidth）
.样式（“填充”，barColor）
条。追加（“文本”）
.text（函数（d）{return d}）
.attr（“x”，条形宽度）
.attr（“y”，9）
.attr（“转换”、“转换（-10,0）”）

svg{边框：实心1px灰色}
svg文本{
字体系列：无衬线；
字体大小：11px；
填充物：白色；
文本锚定：中间；
}
svg矩形{
填充物：灰色；
笔画：黑色；
}

var bars = stacks.selectAll("g.bar")
.data(function(d, i) { return d; })
.enter().append(...)