Javascript 如何使用D3和JS字典制作多个饼图？_Javascript_Charts_D3.js_Pie Chart

Javascript 如何使用D3和JS字典制作多个饼图？

javascript charts d3.js

Javascript 如何使用D3和JS字典制作多个饼图？,javascript,charts,d3.js,pie-chart,Javascript,Charts,D3.js,Pie Chart,我正在尝试改编Mike Bostock的代码，制作多个饼图。它非常简洁，但我很难理解代码的一个基本部分： // Define the data as a two-dimensional array of numbers. If you had other // data to associate with each number, replace each number with an object, e.g., // `{key: "value"}`. var data = [ [1197

我正在尝试改编Mike Bostock的代码，制作多个饼图。它非常简洁，但我很难理解代码的一个基本部分：

// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.
var data = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

什么是

{key:“value”}

的一个例子，使这项工作正常？我试过了

[{key1:100}，{key2:200}]

[{key1:100，key2:200}]

[{'key1'：100，'key2'：200}]

和其他一些排列

我的目标是使用

json

对象而不是像这样的数据结构，但我想更好地理解如何构造正确的数据结构

要生成图表（通过gist），请使用以下代码：

var m = 10,
    r = 100,
    z = d3.scale.category20c();

var svg = d3.select(".sentiment-pie-chart-1").selectAll("svg")
    .data(data)
  .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("svg:g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");

svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

您可以使用任何任意结构（包括您列出的结构），只要您还可以替换饼图布局从该结构提取值的方式。这意味着您可能需要一致的键名。例如数据结构

[{key1: 100}, {key1: 200}]

您需要使用--我假设这是您的问题，如下定义饼图布局

svg.selectAll("path")
   .data(d3.layout.pie().value(function(d) { return d.key1; })
// etc

这将获取每个数组中的每个元素（注意这里有两个嵌套的对象数组），并获取成员

.key1

，以计算饼图分数。


<html>
<head>
    <title>
        Pie chart
    </title>
<script type="text/javascript" src='d3.v3.min.js' charset='utf-8' ></script>
</head>
    <body>
        <script type="text/javascript">

            var data = [
                [11975,  5871, 8916, 2868],
                [ 1951, 10048, 2060, 6171],
                [ 8010, 16145, 8090, 8045],
                [ 1013,   990,  940, 6907]
            ];

            //For the data above you can convert each data row in array of object.
            //like,

            var newData = data[0].map(function(val){
                return {value : val} ;
            });

            //here you will get  : 

            // var newData = [
            //     {value : 11975} ,
            //     {value : 5871} ,
            //     {value : 8916} ,
            //     {value : 2868} ];

            // You can do same thing for each data row  .

            var width = 1100 , height = 650 , radius = 250 ,
            color = ["#C5AAF5","#FB7374","#A3CBF1","#79BFA1","#F5A352","#94B3C8", "#F9D08B","#B2AC4E","#64BD4F","#C09372"];

            var colorDescriptions = [];

            var svgContainer = d3.select("body") // create svg container
                .append("svg:svg")
                .data([newData])
                .attr("width", width)
                .attr("height", height)
                .append("svg:g")
                .attr("transform", "translate(" + 300 + "," + 300 + ")") ;;

            // Create new svg containier for each element && transform it to diff point.
            var arc = d3.svg.arc() // draw arc of given radius
                .outerRadius(radius);

            var pie = d3.layout.pie() // assign data for pie chart
                .value(function(d) { return d.value; });

            var arcs = svgContainer.selectAll("g.slice") // slice the circle
                .data(pie)   
                .enter()
                .append("svg:g")
                .attr("class", "slice");

            arcs.append("svg:path") // fill color in each slice
                .attr("fill", function(d, i) { return color[i]; } )
                .attr("d", arc)

            arcs.append("svg:text") // write slice information values
                .attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius;
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d, i) { return newData[i].value; })
                .style("font-family","monospace")
                .style("fill", "#3f3f3f")
                .style("font-size", "20px");

            var description = svgContainer.append("g").attr("class", "description"); // pie chart description
            var desc_label = description.append("text")
                .attr("class", "description")
                .attr("y", 300)
                .attr("x", 000)
                .text("Pie Chart")
                .style("font-weight", "bold")
                .style("font-size", "20px")
                .style("text-anchor", "middle"); 
        </script>
    </body>
</html>

饼图
风险值数据=[
[11975,  5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013,   990,  940, 6907]
];
//对于上面的数据，您可以转换对象数组中的每个数据行。
//像，
var newData=data[0]。映射（函数（val）{
返回{value:val}；
});
//您将获得：
//var newData=[
//{value:11975}，
//{value:5871}，
//{value:8916}，
//{值：2868}]；
//您可以对每个数据行执行相同的操作。
变幅宽度=1100，高度=650，半径=250，
颜色=[“C5AAF5”、“FB7374”、“A3CBF1”、“79BFA1”、“F5A352”、“94B3C8”、“F9D08B”、“B2AC4E”、“64BD4F”、“C09372”]；
var colorDescriptions=[]；
var svgContainer=d3.select（“body”）//创建svg容器
.append（“svg:svg”）
.data（[newData]）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.append（“svg:g”）
.attr（“转换”、“翻译”（“+300+”，“+300+”））；；
//为每个元素创建新的svg容器&&将其转换为差异点。
var arc=d3.svg.arc（）//绘制给定半径的圆弧
.外层（半径）；
var pie=d3.layout.pie（）//为饼图分配数据
.value（函数（d）{返回d.value；}）；
var arcs=svgContainer.selectAll（“g.slice”）//对圆进行切片
.数据（pie）
.输入（）
.append（“svg:g”）
.attr（“类”、“切片”）；
arcs.append（“svg:path”）//在每个片中填充颜色
.attr（“fill”，函数（d，i）{返回颜色[i]；}）
.attr（“d”，弧）
arcs.append（“svg:text”）//写入片信息值
.attr（“转换”，函数（d）{
d、 内半径=0；
d、 外层=半径；
返回“平移（“+弧形心（d）+”）；
})
.attr（“文本锚定”、“中间”）
.text（函数（d，i）{返回新数据[i].value；}）
.style（“字体系列”、“单空格”）
.样式（“填充”、“3f3f”）
.style（“字体大小”、“20px”）；
var description=svgContainer.append（“g”）.attr（“class”、“description”）；//饼图说明
var desc_label=description.append（“文本”）
.attr（“类别”、“说明”）
.attr（“y”，300）
.attr（“x”，000）
.text（“饼图”）
.style（“字体大小”、“粗体”）
.style（“字体大小”，“20px”）
.style（“文本锚定”、“中间”）；

谢谢你的建议。我不太明白不同的钥匙是如何处理的。如果我有这样的数据

var data=[[{key1:'100'}，{key2:'50'}]，{key1:'200'}，{key2:'70'}]

我是否需要为每种键类型使用

.value（）

来声明特定的键名？在这种情况下，它不会像这样工作，因为每个元素的键名是不同的。您需要一些其他的东西来告诉您在哪个上下文中获取哪个键。通常，你会把所有的东西都放在同一把钥匙下。你有没有碰巧解决了这个问题？我也陷入了同样的境地。