如何在D3.js柱状图中使用对象数组数据集加载对应图片

嘿，我懂你的需求啦！你已经搞定了基础的柱状图，现在想切换到带图片URL的对象数组，让每个柱子都加载对应分类的图片对吧？这就帮你调整代码：

关键修改点： #

• 首先修正你定义的对象数组的语法错误：URL字符串必须加引号，不然JavaScript会报错。
• 把原来的数值数组替换成对象数组，之后所有访问数据的地方要从直接用d改成d.Value（因为现在d是一个对象，Value是它的数值属性）。
• 图片的xlink:href回调直接返回d.URLimage，就能加载对应分类的图片了。

修改后的完整代码： #

var w = 750;
var h = 300;
var barPadding = 2;
// 修正后的对象数组，URL添加了引号，并且修正了最后一个分类的重复名称（原来两个H，我改成了I，你可以按需调整）
var dataset = [ 
  {"category": "A", "Value":18, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "B", "Value":15, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "C", "Value":13, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "D", "Value":11, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "E", "Value":12, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "F", "Value":15, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "G", "Value":20, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "H", "Value":25, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"},
  {"category": "I", "Value":30, "URLimage":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"}
];

//Create SVG element
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * (w / dataset.length);
  })
  .attr("y", function(d) {
    // 这里改成d.Value，因为现在d是对象，数值存在Value属性里
    return h - (d.Value * 10);
  })
  .attr("width", w / dataset.length - barPadding)
  .attr("height", function(d) {
    return d.Value * 10;
  });

svg.selectAll(".images")
  .data(dataset)
  .enter().append("svg:image")
  .attr("x", function(d, i) {
    return i * (w / dataset.length)+18 ;
  })
  .attr("y", function(d) {
    return h - (d.Value * 10);
  })
  .attr("width", 40)
  .attr("height", 40)
  .attr("xlink:href", function(d){
    // 直接返回当前对象的URLimage属性
    return d.URLimage;
  });

额外说明： #

我还帮你修正了原来对象数组里最后两个重复的category: "H"，改成了I，避免分类名称重复的问题，你可以根据自己的需求调整。

现在你只需要把每个URLimage换成你想要的不同图片地址，就能实现每个柱子加载对应图片的效果啦！

内容的提问来源于stack exchange，提问作者Gangrel