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);