Fatal编程技术网
  • javascript/
  • Javascript 如何制作NVD3饼图而不使用；标签"；及；“价值”；在JSON对象中？

Javascript 如何制作NVD3饼图而不使用；标签"；及；“价值”；在JSON对象中？

javascript

Javascript 如何制作NVD3饼图而不使用；标签"；及；“价值”；在JSON对象中？,javascript,nvd3.js,Javascript,Nvd3.js,下面的代码要求JSON对象指定“值”和“标签”。我想这样做，这样就可以用任何键名创建饼图 //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

下面的代码要求JSON对象指定“值”和“标签”。我想这样做，这样就可以用任何键名创建饼图

//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;
});

#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>
上面的函数可以修改为返回d.fruit和d.number，以创建JSON对象[{“fruit”：“apple”，“number”：1}]的饼图，但我希望它适用于任何JSON对象，而不管键名如何

//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;
});

#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>


#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>

#图表svg{
高度：400px；
}
//常规饼图示例
nv.addGraph（函数（）{
var chart=nv.models.pieChart（）
.x（函数（d）{返回d.label}）
.y（函数（d）{返回d.value}）
.显示标签（正确）；
d3.选择（“图表svg”）
.datum（示例数据（））
.transition（）.持续时间（350）
.电话（图表）；
收益表；
});
//甜甜圈图表示例
nv.addGraph（函数（）{
var chart=nv.models.pieChart（）
.x（函数（d）{返回d.label}）
.y（函数（d）{返回d.value}）
.showLabels（true）//显示饼图标签
.labelThreshold（.05）//配置要显示的标签的最小切片大小
.labelType（“百分比”）//配置要在标签中显示的数据类型。可以是“键”、“值”或“百分比”
.donut（true）//打开甜甜圈模式。使饼图看起来美味可口！
.donutRatio（0.35）//配置您希望甜甜圈孔大小的大小。
;
d3.选择（“图表2 svg”）
.datum（示例数据（））
.transition（）.持续时间（350）
.电话（图表）；
收益表；
});
//饼图示例数据。请注意，只有一个键值对数组。
函数exampleData（）{
返回[
{“值”：“1”，“标签”：“苹果”}，{“值”：“2”，“标签”：“香蕉”}
];
}
以下几行定义了图表应使用的属性：

#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>

var chart = nv.models.pieChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
因此，您可以将
d.label
更改为
d.whatever
，如果您有
whatever
属性，它将对
x
使用该属性

#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>
在将数据传递到图表之前，您可以先运行数据。大致如下：

#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>

d3.map(data, function(item) {
   return {
     label: item.car,
     value: item.speed
   };
}).values();
您可以很容易地将其封装在函数中，例如：

#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>

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访问器之外，没有其他可靠的方法可以保证您将看到期望看到的数据。如果你不表达数据的含义，图表就无法理解数据。

我理解这一点。如果我有一个“水果”和“数字”JSON对象会怎么样；还是“汽车”和“速度”JSON对象？我不想一直将d.label和d.value更改为d.fruit/d.number、d.car/d.speed等。使用一种方法更新我的答案，您可以使用该方法将数据转换为通用格式。这是危险的，因为无法保证属性的顺序：[{“number”：“1”，“fruit”：“apples”}]代码返回JSON的实际值；在本例中，“1”。如何获取密钥（“数字”、“水果”）？返回
I
而不是
d[I]
以获取密钥。@kalley是对的，您可能需要执行类似类型检查的操作，以确定数值是值，字符串值是标签。这很有效。必须在返回语句中的d[i]周围加括号。 
#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>

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];
                }
            }
        })