d3js scatterplot自定義圖標和動畫

Question

我剛剛開始與d3js，我想知道是否有可能創建散點圖與數據點的自定義圖標類似於這種方法Forced Layout？

我不想使用d3.svg.symbol（），因爲我想使用帶有公司徽標的自定義圖標來標記每個數據點。

我的最終目標是根據x值沿水平軸轉換一個點（帶有自定義圖標）。我已經搜索瞭如何用d3js做到這一點，但沒有運氣。

Answer 1

要使用圖標而不是符號，只需使用圖像元素替換路徑元素（即調用符號生成器）即可。

如果有一個數據集，D，與像{src: http.myImageURL, x: 10, y : 20}元素會是這個樣子：

var svg = d3.select('body').append('svg'); 

svg.append('g').selectAll('.myPoint') 
    .data(D) 
    .enter() 
    .append('image') 
    .attr("xlink:href", function(d){ return d.src }) 
    .attr("x", function(d){ return d.x }) 
    .attr("y", function(d){ return d.y }) 
    .attr("width", 16) 
    .attr("height", 16);