Question

我正在使用d3库学习图表，我不是为网页开发，而是在Filemaker数据库中使用Web查看器。我有以下代码，它绘制了一个带有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>

Answer 1

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

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

这是您更新的代码：

＆＃13;

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

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>

＆＃13;

修改饼图代码以用于对象数组

1 个答案: