添加 <id> + <data> 到 D3-PIE-chart 的 ARC

Question

我碰巧使用 D3js-Library 来可视化一些 SQL-JSON_LD 数据并想执行以下操作：

将单独的 id-TAG 以及数据集（具有各种元素的矩阵）附加到每个切片

我的代码现在看起来像这样

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  path {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
    transition: fill 250ms linear;
    transition-delay: 150ms;
  }
  
  path:hover {
    fill: #999;
    stroke: #000;
    transition-delay: 0;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var data = {
  {"year":"2017-07-01","value":"1"},
  {"year":"2017-07-02","value":"1"},
  {"year":"2017-07-03","value":"2"},
  {"year":"2017-07-04","value":"3"},
  {"year":"2017-07-05","value":"5"},
  {"year":"2017-07-06","value":"8"},
  {"year":"2017-07-07","value":"13"},
  {"year":"2017-07-08","value":"21"},
  {"year":"2017-07-09","value":"24"},
  {"year":"2017-07-10","value":"55"},
  {"year":"2017-07-11","value":"89"},};

    var width = 960,
      height = 500;
      arc_ids = d3.range(data.length); // for naming the arcs

    var outerRadius = height / 2 - 20,
      innerRadius = outerRadius / 3,
      cornerRadius = 10;

    var pie = d3.layout.pie()
      .padAngle(.02);

    var arc = d3.svg.arc()
      .padRadius(outerRadius)
      .innerRadius(innerRadius);

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("id","viz_pieChart") // adds an ID to the whole chart
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    svg.selectAll("path")
      .data(pie(data.map(function(d) { return parseInt(d.value); })))
      .attr("id", function(d, i) { console.log('CP1'); return "arc-" + arc_ids[i]; }) // This was intended to add an individual id to each arc, but it doesn't
      .attr("data", function(d) { return d.data; }) // attach data to arc according to value, as e.g.: {"year":"2017-07-01","value":"1"}
      .enter().append("path")
      .each(function(d) {
        d.outerRadius = outerRadius - 20;
      })
      .attr("d", arc)
      .on("mouseover", arcTween(outerRadius, 0))
      on("click", function(d){console.log(d.id);console.log(d.data.toString())}); //print id of the clicked arc as well as saved data
      .on("mouseout", arcTween(outerRadius - 20, 150));

    function arcTween(outerRadius, delay) {
      return function() {
        d3.select(this).transition().delay(delay).attrTween("d", function(d) {
          var i = d3.interpolate(d.outerRadius, outerRadius);
          return function(t) {
            d.outerRadius = i(t);
            return arc(d);
          };
        });
      };
    }
 //test whether an arc can be reached, e.g. the 2nd Element
 console.log(document.getElementById('slice-1')); // gives an error
  </script>

我也检查了 this1, and 因为他们看起来很有希望，但它仍然不适合我。

之后我想使用弧的附加数据将其打印到另一个 svg 图形中。但首先要解决问题。

很抱歉 post 有一个以上的具体问题！

感谢您的帮助！

Answer 1

you must append the path before give it an id or data

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  path {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
    transition: fill 250ms linear;
    transition-delay: 150ms;
  }
  
  path:hover {
    fill: #999;
    stroke: #000;
    transition-delay: 0;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var data = [
  {"year":"2017-07-01","value":"1"},
  {"year":"2017-07-02","value":"1"},
  {"year":"2017-07-03","value":"2"},
  {"year":"2017-07-04","value":"3"},
  {"year":"2017-07-05","value":"5"},
  {"year":"2017-07-06","value":"8"},
  {"year":"2017-07-07","value":"13"},
  {"year":"2017-07-08","value":"21"},
  {"year":"2017-07-09","value":"24"},
  {"year":"2017-07-10","value":"55"},
  {"year":"2017-07-11","value":"89"}];

    var width = 960,
      height = 500;
      arc_ids = d3.range(data.length); // for naming the arcs

    var outerRadius = height / 2 - 20,
      innerRadius = outerRadius / 3,
      cornerRadius = 10;

    var pie = d3.layout.pie()
      .padAngle(.02);

    var arc = d3.svg.arc()
      .padRadius(outerRadius)
      .innerRadius(innerRadius);

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("id","viz_pieChart") // adds an ID to the whole chart
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    svg.selectAll("path")
      .data(pie(data.map(function(d) { 
      return parseInt(d.value); 
      })))
            .enter().append("path")
      .each(function(d) {
        d.outerRadius = outerRadius - 20;
      })
      .attr("id", function(d, i) {  return "arc-" + arc_ids[i]; }) 
      
      // This was intended to add an individual id to each arc, but it doesn't
      .attr("data", function(d) { return d.data; }) // attach data to arc according to value, as e.g.: {"year":"2017-07-01","value":"1"}

      .attr("d", arc)
      .on("mouseover", arcTween(outerRadius, 0))
      .on("click", function(d){
      console.log(this.id);
      console.log(d.data.toString())
      }) //print id of the clicked arc as well as saved data
      .on("mouseout", arcTween(outerRadius - 20, 150));

    function arcTween(outerRadius, delay) {
      return function() {
        d3.select(this).transition().delay(delay).attrTween("d", function(d) {
          var i = d3.interpolate(d.outerRadius, outerRadius);
          return function(t) {
            d.outerRadius = i(t);
            return arc(d);
          };
        });
      };
    }
 //test whether an arc can be reached, e.g. the 2nd Element
 console.log(document.getElementById('slice-1')); // gives an error
  </script>

添加 <id> + <data> 到 D3-PIE-chart 的 ARC

Add <id> + <data> to an ARC of a D3-PIE-chart

javascript

d3.js

pie-chart