Question

以下代码要求JSON对象指定“value”和“label”。我想这样做，以便可以使用任何键名创建饼图。

//Regular pie chart example
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true);

d3.select("#chart svg")
    .datum(exampleData())
    .transition().duration(350)
    .call(chart);

  return chart;
});

上面的函数可以修改为返回d.fruit和d.number来创建一个JSON对象的饼图[{“fruit”：“apple”，“number”：1}]，但我想这个无论密钥名称如何，都可以使用任何JSON对象。

#chart svg {
  height: 400px;
}

</style>


<div id="chart">
  <svg></svg>
</div>
</head>

<body>
<script>
//Regular pie chart example
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true);

    d3.select("#chart svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

  return chart;
});

//Donut chart example
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)     //Display pie labels
      .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
      .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
      .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
      .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
      ;

    d3.select("#chart2 svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

  return chart;
});

//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
  return  [
      {"value":"1","label":"apples"},{"value":"2","label":"bananas"}
    ];
}
</script>
</body>


</html>

Answer 1

以下行定义了图表应使用的属性：

var chart = nv.models.pieChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })

因此，您可以将d.label更改为d.whatever，如果您拥有whatever属性，则会将其用于x。

在将数据传递到图表之前，您可以通过某些内容运行数据。有点像：

d3.map(data, function(item) {
   return {
     label: item.car,
     value: item.speed
   };
}).values();

您可以轻松地将其包装在类似以下的函数中：

function transform(data, x, y) {
  x = x || "label";
  y = y || "value";
  return d3.map(data, function(item) {
    return {
      label: item[x],
      value: item[y]
    };
  }).values();
}

d3.select("#chart2 svg")
  .datum(transform(exampleData(), "car", "speed"));

除了转换数据或更改x和y访问器之外，没有其他可靠的方法可以保证您将看到您期望看到的数据。如果没有表达它的含义，图表无法理解您的数据。

Answer 2

var chart = nv.models.pieChart()
        .x(function(d) { //always spits out first memeber of object
            var val, x;
            val = 0;
            x = 0;
            for (i in d) {
                if (x++ === val)
                {
                    return d[i];
                }
            }
        })
        .y(function(d) { //always spits out second member of object
            var val, x;
            val = 1;
            x = 0;
            for (i in d) {
                if (x++ === val)
                {
                    return d[i];
                }
            }
        })

如何在不使用JSON对象中的“label”和“value”的情况下制作NVD3饼图？

2 个答案: