我如何使用符號隨着聯想

Question

我有一個傳說，用彩色矩形...

我想用符號（即，圓，交叉更換矩形，鑽石，方形）。我無法弄清楚如何做到這一點。

我一直在使用.attr("d", d3.svg.symbol().type('circle')的變體。舉例來說，我想：

 legendRect 
      .attr("d", d3.svg.symbol().type(function (d) { return d[2] }) 

，我嘗試：

 legendRect.append("svg:path") 
      .attr("d", d3.svg.symbol().type((d: any) => { return d[2] })) 

d[2]是「應該是」從legendData拉動，如在下面的代碼示例...喜歡它d[1]做爲fill。

但我從未看到任何改變。

下面是我用圖例的代碼，沒有符號的東西，下面。我做錯了什麼，如何將矩形改爲符號？我需要在哪裏添加什麼？

 var legendData = [["OA", "yellow", "circle"], ["OI", "blue", "cross"], ["RARC", "green", "diamond"], ["CAPE", "red", "square"], ["Other", "black", "triangleDown"]]; 

     var legend = this.svg.append("g") 
      .attr("class", "legend") 
      .attr("height", 0) 
      .attr("width", 0) 
      .attr('transform', 'translate(-20,250)'); 

     var legendRect = legend.selectAll('rect').data(legendData); 

     legendRect.enter() 
      .append("rect") 
      .attr("x", width - 65) 
      .attr("width", 10) 
      .attr("height", 10) 
      ; 

     legendRect 
      .attr("y", function (d, i) { 
       return i * 20; 
      }) 
      .style("fill", function (d) { 
       return d[1]; 
      }) 

     var legendText = legend.selectAll('text').data(legendData); 

     legendText.enter() 
      .append("text") 
      .attr("x", width - 52); 

     legendText 
      .attr("y", function (d, i) { 
       return i * 20 + 9; 
      }) 
      .text(function (d) { 
       return d[0]; 
      }); 

Answer 1

下面是我將如何編碼它。請注意，我將數據綁定到包裝g元素，然後將符號和文本放入每個圖例項目中。然後您可以放置​​g，而不是分別放置文本和「符號」。這也消除了對數據進行雙重綁定的需要。

var legendData = [["OA", "yellow", "circle"], ["OI", "blue", "cross"], ["RARC", "green", "diamond"], ["CAPE", "red", "square"], ["Other", "black", "triangleDown"]]; 
 

 
var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 500); 
 

 
var legend = svg.append('g') 
 
    .attr("class", "legend") 
 
    .attr("height", 0) 
 
    .attr("width", 0) 
 
    .attr('transform', 'translate(20,20)'); 
 

 
var legendRect = legend 
 
    .selectAll('g') 
 
    .data(legendData); 
 

 
var legendRectE = legendRect.enter() 
 
    .append("g") 
 
    .attr("transform", function(d,i){ 
 
     return 'translate(0, ' + (i * 20) + ')'; 
 
    }); 
 
    
 
legendRectE 
 
    .append('path') 
 
    .attr("d", d3.svg.symbol().type((d) => { return d[2] })) 
 
    .style("fill", function (d) { 
 
     return d[1]; 
 
    }); 
 

 
legendRectE 
 
    .append("text") 
 
    .attr("x", 10) 
 
    .attr("y", 5) 
 
    .text(function (d) { 
 
     return d[0]; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

這是爲您的圖例使用符號的實現。您可以使用如下的符號：

svg.selectAll('.symbol') 
    .data(legendData) 
    .enter() 
    .append('path') 
    .attr('transform', function(d, i) { 
     return 'translate(' + (20) + ',' + ((i * 20) + 10) + ')'; 
    }) 
    .attr('d', d3.symbol().type(function(d, i) { 
     if (d[2] === "circle") { 
      return d3.symbolCircle; 
     } else if (d[2] === "cross") { 
      return d3.symbolCross; 
     } else if (d[2] === "diamond") { 
      return d3.symbolDiamond; 
     } else if (d[2] === "square") { 
      return d3.symbolSquare; 
     } else { 
      return d3.symbolTriangle; 
     } 
     }) 
     .size(100)) 
    .style("fill", function(d) { 
     return d[1]; 
    }); 

然後你可以設置你的傳奇標籤如下所示：

svg.selectAll('.label') 
    .data(legendData) 
    .enter() 
    .append('text') 
    .attr("x", "40") 
    .attr("y", function(d, i){ return ((i * 20)+15);}) 
    .text(function(d) { 
     return d[0]; 
    }); 

檢查小提琴這裏 - https://jsfiddle.net/zoxckLe3/

附： - 以上解決方案使用d3 v4。要在v3中實現這一點，請使用以下行​​而不是將符號名稱與d[2]匹配的零件。

Answer 3

對於添加圖片圖標，你可以使用下面的代碼。

legend.append("**image**") 
     .attr("x", 890) 
     .attr("y", 70) 
     .attr("width", 20) 
     .attr("height", 18) 
     .attr("xlink:href",function (d) { 
      **return "../assets/images/dev/"+d+".png";** 
     }) 

這對我的作品..