Javascript 不能'；t用d3 js饼图图例中的值替换数字

我试图用各个饼图（奥迪、奔驰、宝马、沃尔沃等）的值列表替换饼图图例中的数字

我在下面尝试过，但它没有在图例中显示任何数据

    legend.append("text")
        .attr("x", 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .text(d3.select(this).datum().data.label);

而不是

    legend.append("text")
        .attr("x", 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .text(function (d) { return d; });

这是小提琴

我是D3JS图表新手，我该怎么做呢？

最简单的解决方案（不需要对代码做太多更改）是

`d` is index to your data array

legend.append("text")
        .attr("x", 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .text(function(d) { return data[d].label; });

legend.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .text(function(d) { 
        return data[d].label; 
    });

最简单的解决方案是

legend.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .text(function(d) { 
        return data[d].label; 
    });

应该是这样的：

向饼图切片添加颜色（因此标签决定切片的颜色）：

将数据设置为图例

var legend = d3.select("#chart").append("svg")
    .attr("class", "legend")
    .attr("width", r)
    .attr("height", r * 2)
    .selectAll("g")
    .data(data) //setting the data to legend

将如下文本设置为图例标签：

legend.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .text(function(d) { console.log(d);return d.label; });

工作代码

希望这有帮助

应该是这样的：

向饼图切片添加颜色（因此标签决定切片的颜色）：

将数据设置为图例

var legend = d3.select("#chart").append("svg")
    .attr("class", "legend")
    .attr("width", r)
    .attr("height", r * 2)
    .selectAll("g")
    .data(data) //setting the data to legend

将如下文本设置为图例标签：

legend.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .text(function(d) { console.log(d);return d.label; });

工作代码

---

希望这有帮助

功能参数

d

是绑定到元素的数据，

i

是数据索引。因此，您可以获得如下所示的标签

legend.append("text")
        .attr("x", 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .text(function(d,i) { return data[i].label; });

var w=400，
h=400，
r=180，
内部=70，
颜色=d3.scale.category20c（）；
数据=[{
“标签”：“奥迪”，
“价值”：22
}, {
“标签”：“奔驰”，
“价值”：12
}, {
“标签”：“沃尔沃”，
“价值”：16
}, {
“标签”：“宝马”，
“价值”：6
}, {
“标签”：“Rolce Royce”，
“价值”：12
}, {
“标签”：“特斯拉”，
“价值”：8
}];
var total=d3.总和（数据，函数（d）{
返回d3.和（d3.值（d））；
});
var vis=d3。选择（“图表”）
.append（“svg:svg”）
.数据（[数据]）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“转换”（“+r*1.1+”，“+r*1.1+”））
var textTop=vis.append（“文本”）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.attr（“类”、“文本顶部”）
.案文（“总数”）
.attr（“y”，-10），
textbooth=vis.append（“文本”）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.attr（“类”、“文本底部”）
.文本（总计.固定（2）+“m”）
.attr（“y”，10）；
var arc=d3.svg.arc（）
.内半径（内）
.外层（r）；
var arcOver=d3.svg.arc（）
.内半径（内+5）
.外层（r+5）；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d值；
});
var arcs=vis.selectAll（“g.slice”）
.数据（pie）
.输入（）
.append（“svg:g”）
.attr（“类”、“切片”）
.on（“鼠标悬停”，功能（d）{
d3.select（this.select（“路径”）.transition（）
.持续时间（200）
.attr（“d”，arcOver）
text.text（d3.select（this.datum（）.data.label）
.attr（“y”，-10）；
text bottom.text（d3.select（this.datum（）.data.value.toFixed（2））
.attr（“y”，10）；
})
.开启（“鼠标出”，功能（d）{
d3.select（this.select（“路径”）.transition（）
.持续时间（100）
.attr（“d”，弧）；
text top.text（“总计”）
.attr（“y”，-10）；
text bottom.text（总计.toFixed（2）+“m”）；
});
arcs.append（“svg:path”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）；
var legend=d3.选择（“图表”）.追加（“svg”）
.attr（“类”、“图例”）
.attr（“宽度”，r）
.attr（“高度”，r*2）
.全选（“g”）
.data（color.domain（）.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*20+”）；
});
图例。追加（“rect”）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.文本（功能（d，i）{
返回数据[i]。标签；
});
.slice路径{
冲程：#fff；
笔画宽度：1px；
}
.textTop{
字体系列：“SegoeUI”；
字号：12号；
填充：#bbb；
}
.textbooth{
填充：#444；
字体系列：“SegoeUI”；
字体大小：粗体；
字号：18pt；
}
.顶{
边框：1px实心#bbb；
颜色：#777；
字体系列：“SegoeUI”；
填充物：5px；
文字装饰：无；
}
.top:悬停{
边框：1px实心#555；
颜色：#333；
}
功能参数
d
是绑定到元素的数据，
i
是数据索引。因此，您可以获得如下所示的标签

legend.append("text")
        .attr("x", 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .text(function(d,i) { return data[i].label; });


var w=400，
h=400，
r=180，
内部=70，
颜色=d3.scale.category20c（）；
数据=[{
“标签”：“奥迪”，
“价值”：22
}, {
“标签”：“奔驰”，
“价值”：12
}, {
“标签”：“沃尔沃”，
“价值”：16
}, {
“标签”：“宝马”，
“价值”：6
}, {
“标签”：“Rolce Royce”，
“价值”：12
}, {
“标签”：“特斯拉”，
“价值”：8
}];
var total=d3.总和（数据，函数（d）{
返回d3.和（d3.值（d））；
});
var vis=d3。选择（“图表”）
.append（“svg:svg”）
.数据（[数据]）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“转换”（“+r*1.1+”，“+r*1.1+”））
var textTop=vis.append（“文本”）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.attr（“类”、“文本顶部”）
.案文（“总数”）
.attr（“y”，-10），
textbooth=vis.append（“文本”）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.attr（“类”、“文本底部”）
.文本（总计.固定（2）+“m”）
.attr（“y”，10）；
var arc=d3.svg.arc（）
.内半径（内）
.外层（r）；
var arcOver=d3.svg.arc（）
.内半径（内+5）
.外层（r+5）；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d值；
});
var arcs=vis.selectAll（“g.slice”）
.数据（pie）
.输入（）
.append（“svg:g”）
.attr（“类”、“切片”）
.on（“鼠标悬停”，功能（d）{
d3.select（this.select（“路径”）.transition（）
.持续时间（200）
.attr（“d”，arcOver）
text.text（d3.select（this.datum（）.data.label）
.attr（“y”，-10）；
text bottom.text（d3.select（this.datum（）.data.value.toFixed（2））
.attr（“y”，10）；
})
.开启（“鼠标出”，功能（d）{
d3.select（this.select（“路径”）.transition（）
.持续时间（100）
.attr（“d”，弧）；
短信