javascript - D3.js 从对象数组数据集中可视化选择图像 URL

Question

所以我为自己创建了一个简单的条形图(我说简单，但即使这也花了我很长时间哈哈)

我已成功将图像 URL 附加到图表中每个条形的末尾。

这是Fiddle

目前仅使用 1 个图像:
返回“https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png”

但是，我创建了第二个数据集“dataset2”，它是一个包含 category、Value 和 URLimage< 的数组.

我正在寻求帮助，将“dataset”替换为“dataset2”，以便我可以使用数组数据并提取 URLimage 来自每个类别的数组

var w = 750;
            var h = 300;
            var barPadding = 2;

            var dataset = [18, 15, 13, 11, 12, 15, 20,25,30];

  /*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": "H", "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) {
                    return h - (d * 10);
               })
               .attr("width", w / dataset.length - barPadding)
               .attr("height", function(d) {
                    return d * 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 * 10);
               })
                .attr("width", 40)
                .attr("height", 40)
                .attr("xlink:href", function(d){
                return "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
                });

Answer 1

实现此目的的一个简单方法是利用 D3 passes the datum d AND the index i to each selection 的事实。因此，您可以使用索引来访问dataset2中的相应值:

.attr("xlink:href", function(d, i) {
  return dataset2[i].URLimage
});

(请注意，将两个数据集变量合并在一起也可能很容易。)

这是一个完整的工作示例，对您的代码进行了一些小更改。我在第二个栏使用了篮球的图片，这样您就可以确定它正在工作。

var w = 750;
var h = 300;
var barPadding = 2;

var dataset = [18, 15, 13, 11, 12, 15, 20, 25, 30];

var dataset2 = [{
    "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://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Ftooelecity.org%2Fwp-content%2Fuploads%2F2013%2F03%2FBasketball.png&f=1&nofb=1"
  },
  {
    "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": "H",
    "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) {
    return h - (d * 10);
  })
  .attr("width", w / dataset.length - barPadding)
  .attr("height", function(d) {
    return d * 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 * 10);
  })
  .attr("width", 40)
  .attr("height", 40)
  .attr("xlink:href", function(d, i) {
    return dataset2[i].URLimage
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>