D3.js - Pie Layout - 從json添加其他attr

我使用D3和複雜的json與這個庫，我有一個問題，我需要添加另一個attr或圖像在餅圖的每個路徑，我不「知道如何D3.js - Pie Layout - 從json添加其他attr

我的JSON代碼：

[ 
    {"hash_chart_name" : "Chart_1", "articles" : 25, "images" : 25, "videos" : 50, "hash_link" : "pepe_1"}, 
    {"hash_chart_name" : "Chart_2", "articles" : 25, "images" : 50, "videos" : 25, "hash_link" : "pepe_2"}, 
    {"hash_chart_name" : "Chart_3", "articles" : 50, "images" : 25, "videos" : 25, "hash_link" : "pepe_3"}, 
    {"hash_chart_name" : "Chart_4", "articles" : 75, "images" : 5, "videos" : 10, "hash_link" : "pepe_4"}, 
    {"hash_chart_name" : "Chart_5", "articles" : 10, "images" : 80, "videos" : 10, "hash_link" : "pepe_5"} 
]

D3代碼：

var radius = 90; 

    var color = d3.scale.ordinal() 
     .range([chart_vars_object.color_1, chart_vars_object.color_2, chart_vars_object.color_3]); 

    var arc = d3.svg.arc() 
     .outerRadius(radius) 
     .innerRadius(radius - 50); 

    var pie = d3.layout.pie() 
     .sort(null) 
     .value(function(d) { return d.hash_taggeds_porcent; }); 

    d3.json("json_hard_coded.json", function(error, data) { 
     color.domain(d3.keys(data[0]).filter(function(key) { return key !== "hash_chart_name"; })); 



     data.forEach(function(d) { 
      d.hash_taggeds = color.domain().map(function(name) { 
       //console.log({hash_taggeds_name: name, hash_taggeds_porcent: +d[name]}); 
       return {hash_taggeds_name: name, hash_taggeds_porcent: +d[name]}; 
      }); 
     }); 

     var svg = d3.select("#canvas_svg").selectAll(".pie") 
      .data(data) 
      .enter().append("svg") 
      .attr("class", "pie") 
      .attr("width", radius * 2.5) 
      .attr("height", radius * 2.5) 
      .append("g") 
      .attr("transform", "translate(" + radius + "," + radius + ")"); 

     svg.selectAll(".arc") 
      .data(function(d) { return pie(d.hash_taggeds); }) 
      .enter().append("path") 
      .attr("class", "arc") 
      .attr("d", arc) 
      //.attr("hash_link", function(d) { return d.hash_link;}); 
      .style("fill", function(d) { return color(d.data.hash_taggeds_name); }) 
      .style({ 'stroke': 'Black', 'stroke-width': '5px'}) 
      .on("mouseover", function() { 
       d3.select(this) 
        .classed("active", true) 
      }) 
      .on("mouseout", function() { 
       d3.select(this) 
        .classed("active", false) 
      }); 

     svg.append("text") 
      .attr("dy", ".35em") 
      .style({"text-anchor":"middle", "color":"white"}) 
      .text(function(d) { return d.hash_chart_name; }); 

    });

很好的ATTR：

.attr("hash_link", function(d) { return d.hash_link;});

不工作

我該怎麼辦？

對不起，我的英語，Thanks.-

來源

2014-03-12 Onsterion

你想要的附加屬性來實現呢？您可以將任何您喜歡的屬性設置爲屬性，但在大多數情況下不會產生任何效果。 –

我想在點擊時添加訪問屬性。例子：我有6個餅圖有3個值，當我點擊6個餡餅的一個路徑上比可以打開一些信息喜歡這個網站：http://social.ufc.com/ – Onsterion

對於本你需要一個點擊處理程序而不是一個屬性或使用SVG錨點元素 - 請參閱http://www.w3.org/wiki/SVG_Links –

我與拉斯的評論，你不應該需要這個屬性存儲在一個屬性，因爲它會在綁定的數據提供給你的看法。你應該能夠訪問它在您單擊處理程序是這樣的：

selection.on("click", function(el) { 
    console.log(el.data.hash_link); 
});

這就是說，爲了這個工作，你需要在你的綁定數據可用此屬性。既然你結合d.hashed_tags，你會希望這個屬性可用的對象：

data.forEach(function(d) { 
    d.hash_taggeds = color.domain().map(function(name) { 
     return {hash_taggeds_name: name, hash_taggeds_porcent: +d[name], hash_link: d.hash_link}; 
    }); 
});

來源

2014-03-13 22:03:05 Peter

D3.js - Pie Layout - 從json添加其他attr

回答

相關問題