d3js散点图自定义图标和动画

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