修改饼图代码以与对象数组一起使用答案

【问题标题】：Modify Pie Chart code to use with array of objects修改饼图代码以与对象数组一起使用
【发布时间】：2017-05-25 08:12:08
【问题描述】：

我正在使用 d3 库学习图表，我不是为网页开发，而是在 Filemaker 数据库中使用网络查看器。我有以下代码，它使用 d3.min.js 库绘制饼图。饼图使用显示的数据数组绘制得很好，但是我试图使用也显示的对象数组来绘制饼图。我似乎无法为一组对象数据集正确格式化。我需要更改哪些格式才能正确格式化？

其次，我应该在哪里添加 onclick 属性，

 .attr("onclick", function(d, i){
                    return "location.href='" + script + "&param=" + d.value[0]  + "'";
        });

所以我可以在单击饼图时运行 Filemaker 脚本？这是获取 x 对象值的正确位置和语法吗，目前我在 var arcs 下拥有它？

<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Pie layout, pie chart</title>
<script type="text/javascript" src="d3.js"></script>

<style type="text/css">

    body {
        background-color: white;         //color of chart background
    }

    svg {
        background-color: white;       //color of smaller rectangle behind pit
    }

    text {
        font-family: sans-serif;
        font-size: 12px;
        fill: white;
    }

</style>
</head>
<body>
<script type="text/javascript">

    var script = encodeURI('fmp://$/{{FileName}}?script=BarClick');

    var w = 300;
    var h = 300;
    var dataset = [ {x: 1,y: 5}, {x: 2,y: 10}, {x: 3,y: 20}, {x: 4,y: 45}, {x: 5,y: 6}, {x: 6,y: 25} ];      
    //var dataset = [ 5, 10, 20, 45, 6, 25 ];
    var outerRadius = w / 2;
    var innerRadius = 0;
    var arc = d3.svg.arc()
                    .innerRadius(innerRadius)
                    .outerRadius(outerRadius);

    var pie = d3.layout.pie();

    var color = d3.scale.category20();

    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    var arcs = svg.selectAll("g.arc")
                  .data(pie(dataset))
                  .enter()
                  .append("g")
                  .attr("class", "arc")
                  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
              .attr("onclick", function(d, i){
                    return "location.href='" + script + "&param=" + d.value[0]  + "'";
        });   

    arcs.append("path")
        .attr("fill", function(d, i) {
            return color(i);
        })
        .attr("d", arc);

    arcs.append("text")
        .attr("transform", function(d) {
            return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d.value;
        });

</script>
</body>
</html>

【问题讨论】：

标签： d3.js

【解决方案1】：

由于您有一个对象数组，因此您需要指定要在饼图生成器上的每个对象中使用的value。在你的情况下，使用y:

var pie = d3.layout.pie()
    .value(function(d) { return d.y; });

这是您的更新代码：

    var w = 300;
    var h = 300;
    var dataset = [{
      x: 1,
      y: 5
    }, {
      x: 2,
      y: 10
    }, {
      x: 3,
      y: 20
    }, {
      x: 4,
      y: 45
    }, {
      x: 5,
      y: 6
    }, {
      x: 6,
      y: 25
    }];
    var outerRadius = w / 2;
    var innerRadius = 0;
    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    var pie = d3.layout.pie()
      .value(function(d) {
        return d.y;
      });

    var color = d3.scale.category20();

    var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);

    var arcs = svg.selectAll("g.arc")
      .data(pie(dataset))
      .enter()
      .append("g")
      .attr("class", "arc")
      .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

    arcs.append("path")
      .attr("fill", function(d, i) {
        return color(i);
      })
      .attr("d", arc);

    arcs.append("text")
      .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
      })
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.value;
      });

&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;

【讨论】：

我按原样厌倦了代码，并使用我最初在代码中的标签，但它不会呈现。我实际上已经尝试过 .value(function(d) { return d.y; });在没有运气的情况下发布之前，这是您所做的唯一更改，对吗？关于我可能遗漏的任何建议？
你说的不渲染是什么意思？只需点击“运行 sn-p”，它显然可以工作。
是的，它正在这里绘制图表，但是当我将它复制到 Filemaker 中的 Web 查看器时，我没有得到图表。所以当我将它复制到 Filemaker Web 查看器时，我错过了正确的操作，有什么想法吗？
在这种情况下，您会遇到不同的问题。因为我看到你是 SO 的新手，所以我建议你每个问题只问 1 个问题。如您所见，这个问题中的具体问题（处理对象数组）已解决。您可以提出有关此文件生成器问题的新问题。此外，接受答案会向未来的用户表明建议的解决方案有效。