同一行中的多個d3圖表

下面的代碼在屏幕左側繪製了1個餅圖和一個圖例。現在，我正在嘗試在左側（同一行）旁邊的圖標上繪製另一個餅圖。我試過在html中使用多個div來完成這項工作，但我想要一個更純粹的d3解決方案，其中重複發生在d3代碼而不是html或css中。同一行中的多個d3圖表

 var w = 200; 
     var h = 200; 
     var r = h/2; 
     var color = d3.scale.category20c(); 

     var vis = d3.select(divId).append("svg:svg").data([descArray]).attr("width",w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")"); 

     var pie = d3.layout.pie().value(function (d, i) { 
      return countArray[i]; 
     }); 

    // declare an arc generator function 
     var arc = d3.svg.arc().outerRadius(r); 

     // select paths, use arc generator to draw 
     var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class",      "slice"); 

     arcs.append("svg:path") 
      .on("click", function(d) {//clicking on individual arcs 
       arcs.selectAll("path").style("opacity", 1);//resets all arcs' opacity to 1 
       d3.select(this).style("opacity", 0.5);//sets clicked arc's opacity down 
       alert(d.data + " " + d.value); 
      }) 

      .style("fill", function(d,i) { return color(i); }) 
      .transition().delay(function(d, i) { return i * 100; }).duration(1000) 
       .attrTween('d', function(d) { 
        var i = d3.interpolate(d.startAngle+0.7, d.endAngle); 
        return function(t) { 
         d.endAngle = i(t); 
        return arc(d); 
        } 
       }) 
      .attr("fill", function (d, i) { 
       return color(i); 
      }); 


     var legend = d3.select(divId).append("svg") 
      .attr("class", "legend") 
      .attr("width", r * 4) 
      .attr("height", r * 4) 
     .selectAll("g") 
      .data(color.domain().slice().reverse()) 
     .enter().append("g") 
      .attr("transform", function(d, i) { return "translate(230," + i * 27 + ")"; }); 



     legend.append("rect") 
      .on("click", function(d) { 
       alert(d.data + " " + d.value); 
      }) 
      .attr("width", 18) 
      .attr("height", 18) 
      .style("fill", function (d, i) { 
       return color(i); 
      })

來源

2015-02-09 yan zhang

我失去了一些東西，或者你就不能使用D3追加一個'div'，然後爲每個'div'添加一個'svg'？ – 2015-02-09 21:39:42

我相信那是我之前做的事情，但是這需要在html中爲我要繪製的每個餅圖都創建一個單獨的div？ – 2015-02-09 21:52:50

您可以使用d3來附加'div'，它不一定要在HTML中開頭。 ''d3.select（「body」）。append（「div」）。attr（「class」，「chart1」）;'會追加一個div，只是多次調用它。你也可以將你的數據放在一個數組數組中，並將數據綁定到每個div上，但如果你剛剛開始，那會變得更加複雜。 – 2015-02-09 22:04:32

把它們放在單獨的div但在相同的SVG元素

可見。假定你svgElement：

var firstChart = vis.append(div). // then put your first chart here 
var secondChart = vis.append(div). // then put your second chart here

來源

2015-02-10 12:52:16 rekoDolph

我有第二個圖形在第一個圖形的頂部繪製的問題。我如何在d3中操縱他們的位置？ – 2015-02-10 17:49:21

d3.select（firstChart）.attr（「x」，changeThis）.attr（「y」，changeThis） rekoDolph 2015-02-11 09:24:45

確保您選擇div。很多代碼正確的時候，它的選擇是錯誤的。 http://bost.ocks.org/mike/selection/ – rekoDolph 2015-02-11 09:33:26

同一行中的多個d3圖表

回答

相關問題