2017-08-24 88 views
1

我偶然玩的D3js库以可视化的一些SQL-JSON_LD数据的ARC,想做到以下几点:添加<id> + <data>到D3-饼图

  • 将各个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>

我也查this1this2this3因为他们似乎有希望的,但它仍然无法为我工作。

之后,我想使用弧的附加数据将其打印到另一个svg图形。但第一次的地址必须工作。

对于具有多个特定问题的post,我很抱歉!

谢谢你的帮助!

+0

你说你想要做什么,但什么是你的问题?发布的代码有问题吗?它的输出是什么?什么是期望的输出? – tima

+0

谢谢你tima,我提出了我的问题以及更精确的代码。 现在,代码不起作用。特别是每个弧的id和数据的附加/地址不起作用。 – Tanoshimi

+0

对于每个弧上的id,你可以只用 返回“arc-”+ i; 然后你会得到arc-1,arc-2,arc-3等的id。 –

回答

-1

必须追加路径之前给它一个id或数据

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

+0

嗨青蛙,谢谢你的提示。有用! :) 现在只是一个小小的补充:我如何确保在创建/更新时,正确的ID是否附加到每个元素上,而不仅仅是在点击它们之后? – Tanoshimi

+0

现在有效。这只是我身边的一个错误。感谢您的帮助! – Tanoshimi