javascript - 在 d3.js 折线图中使用 img 而不是文本标签

Question

Fiddle Example

我无法让 ordinal scale 与缩放和平移一起工作以实现水平滚动效果，所以我决定使用 scale.linear() 来使用 numeric轴刻度的值。我想知道是否可以将 g.tick 中的文本标签与图像元素叠加在一起。我在 .call(xAxis)

之后想出了这段代码

svg.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxis)
    .selectAll(".tick text").each(function(k,i){
      console.log(data[k]["img"]);      
      var r = document.createElement('image')
          r.setAttribute('x',0)
          r.setAttribute('y',9)
          r.setAttribute('xlink:href',data[k]["img"])
          r.setAttribute('width',50)
          r.setAttribute('height',50)
          this.parentNode.insertBefore(r,this);
    })

我看到元素被添加到 g.tick 中，但是图像无处可见。是因为 x 和 y 值吗？另外，如何将 JSON 数据中的图像链接绑定(bind)到 image 元素？我试过 data[k]["img"] 但它给了我 Cannot read property 'img' of undefined。

var img = "https://www.gravatar.com/avatar/904fd39461599f72d580fadf3a73115b?s=128&d=identicon&r=PG&f=1";

var data = [{"item":1,"diameter":"15.00","img":img},{"item":2,"diameter":"10.00","img":img},
{"item":3,"diameter":"25.00","img":img},{"item":4,"diameter":"7.00","img":img},
{"item":5,"diameter":"35.00","img":img},{"item":6,"diameter":"15.00","img":img},
{"item":7,"diameter":"12.00","img":img},{"item":8,"diameter":"10.00","img":img},
{"item":9,"diameter":"17.00","img":img},{"item":10,"diameter":"13.00","img":img},
{"item":11,"diameter":"5.00","img":img},{"item":12,"diameter":"10.00","img":img},
];
function line_chart(field,el){ 
  margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 45
  },
  tickno = 10,

  width = 960 - margin.left - margin.right,
  height = 450 - margin.top - margin.bottom,
  x = d3.scale.linear().domain(d3.extent(data, function (d) {
      return d.item;
  })).range([0, width]),

  ymax = d3.max(data,function(d){
    return (parseInt(d[field])+1);
  }),

  ymin = d3.min(data,function(d){
    return d[field];
  }),

  xmax = d3.max(data,function(d){
    return d.name;
  }),

  y = d3.scale.linear()
    .domain([ymin,ymax])
    .range([height, 0]);

var line = d3.svg.line()
    .x(function (d) {
      return x(d.item);
    })
    .y(function (d) {
      return y(d[field]);
    });

var zoom = d3.behavior.zoom()
    .x(x)
    .scaleExtent([1, 1])
    .y(y)
    .on("zoom", zoomed);

svg = d3.select(el)
    .append("svg:svg")
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append("svg:g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "plot");

var make_x_axis = function () {
    return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(tickno);
 };

var make_y_axis = function () {
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(tickno);
};

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(tickno);


svg.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxis)
    .selectAll(".tick text").each(function(data){      
      var r = document.createElement('image')
          r.setAttribute('x',0)
          r.setAttribute('y',9)
        r.setAttribute('xlink:href','https://www.gravatar.com/avatar/904fd39461599f72d580fadf3a73115b?s=32&d=identicon&r=PG&f=1')
          r.setAttribute('width',50)
          r.setAttribute('height',50)
          this.parentNode.insertBefore(r,this);
    })

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(tickno);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("g")
    .attr("class", "x grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat(""));

svg.append("g")
    .attr("class", "y grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat(""));

var clip = svg.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

var chartBody = svg.append("g")
    .attr("clip-path", "url(#clip)");

chartBody.append("svg:path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

svg.append('g').attr('class','dots').selectAll(".dot").data(data).enter().append("circle").attr("r",3.5)
.attr("cx",function(d){return x(d.item);})
.attr("cy",function(d){return y(d[field]);})

function zoomed() {
    console.log(d3.event.translate);
    console.log(d3.event.scale);
    svg.select(".dots")
        .attr("transform", "translate(" + d3.event.translate + ")scale(" +  d3.event.scale + ")");

    svg.selectAll(".dots circle").attr("r", function(){
       return (3.5  * d3.event.scale);
    });

    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
    svg.select(".x.grid")
        .call(make_x_axis()
        .tickSize(-height, 0, 0)
        .tickFormat(""));
    svg.select(".y.grid")
        .call(make_y_axis()
        .tickSize(-width, 0, 0)
        .tickFormat(""));
    svg.select(".line")
        .attr("class", "line")
        .attr("d", line);
    svg.selectAll(".dots circle").attr("r", function(){
     return (3.5  * d3.event.scale);
    });
  }
}
line_chart('diameter','#area')

Answer 1

您的图片没有显示，因为您的宽度太小了。

此外，如果您以 d3 方式附加图像，它会更简洁一些:

.selectAll(".tick").each(function(d,i){        
    d3.select(this)
      .append('image')
      .attr('xlink:href', data[i].img)
      .attr('x',0)
      .attr('width',128)
      .attr('height',128);
 })

已更新 fiddle .