Javascript D3.js从对象数组数据集中可视化选择图像URL_Javascript_D3.js

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

javascript d3.js

Javascript D3.js从对象数组数据集中可视化选择图像URL,javascript,d3.js,Javascript,D3.js,所以我给自己做了一个简单的条形图（我说简单，但即使这样也花了我很长时间哈哈）我已经设法在图表中每个条的末尾添加了一个图像URL 这是你的电话号码目前仅使用1个图像：返回“https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png“ 但是，我创建了第二个数据集“dataset2”，它是一个数组，包含类别、值和URLimage 我正在寻找用“dataset2”替换“d

所以我给自己做了一个简单的条形图（我说简单，但即使这样也花了我很长时间哈哈）

我已经设法在图表中每个条的末尾添加了一个图像URL

这是你的电话号码

目前仅使用1个图像：

返回“https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png“

但是，我创建了第二个数据集“

dataset2

”，它是一个数组，包含

类别

、

值

和

URLimage

我正在寻找用“

dataset2

”替换“

dataset

”的帮助，以便我可以使用数组数据并从数组中为每个类别提取

urimage

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

一个简单的方法就是利用D3的优势。因此，您可以使用索引访问

dataset2

中的相应值：

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

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

下面是一个完整的工作示例，对代码做了一点小改动。我在第二个酒吧用了一张篮球的照片，这样你就可以确定它在工作。

var w=750；
var h=300；
var=2；
var数据集=[18,15,13,11,12,15,20,25,30]；
变量数据集2=[{
“类别”：“A”，
“价值”：18，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“B”，
“价值”：15，
“URLimage”：https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Ftooelecity.org%2Fwp-内容%2上传%2F2013%2F03%2FBall.png&f=1&nofb=1“
},
{
“类别”：“C”，
“价值”：13，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“D”，
“价值”：11，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“E”，
“价值”：12，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“F”，
“价值”：15，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“G”，
“价值”：20，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“H”，
“价值”：25，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“H”，
“价值”：30，
“URLMAIGE”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
}
]
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回i*（带数据集长度）；
})
.attr（“y”，函数（d）{
返回h-（d*10）；
})
.attr（“宽度”，w/dataset.length-条形填充）
.attr（“高度”，功能（d）{
返回d*10；
})
svg.selectAll（“.images”）
.数据（数据集）
.enter（）.append（“svg:image”）
.attr（“x”，函数（d，i）{
返回i*（w/dataset.length）+18；
})
.attr（“y”，函数（d）{
返回h-（d*10）；
})
.attr（“宽度”，40）
.attr（“高度”，40）
.attr（“xlink:href”，函数（d，i）{
返回数据集2[i].URLimage
});
一个简单的方法是利用D3。因此，您可以使用索引访问dataset2
中的相应值：
.attr("xlink:href", function(d, i) {
  return dataset2[i].URLimage
});

（请注意，将两个数据集变量合并在一起可能也很容易。）
下面是一个完整的工作示例，对代码做了一点小改动。我在第二个酒吧用了一张篮球的照片，这样你就可以确定它在工作。
var w=750；
var h=300；
var=2；
var数据集=[18,15,13,11,12,15,20,25,30]；
变量数据集2=[{
“类别”：“A”，
“价值”：18，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“B”，
“价值”：15，
“URLMAIGE”：https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Ftooelecity.org%2Fwp-内容%2上传%2F2013%2F03%2FBall.png&f=1&nofb=1“
},
{
“类别”：“C”，
“价值”：13，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“D”，
“价值”：11，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“E”，
“价值”：12，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“F”，
“价值”：15，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“G”，
“价值”：20，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“H”，
“价值”：25，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
},
{
“类别”：“H”，
“价值”：30，
“URLimage”：https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
}
]
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回i*（带数据集长度）；
})
.attr（“y”，函数（d）{
返回h-（d*10）；
})
.attr（“宽度”，w/dataset.length-条形填充）
.attr（“高度”，功能（d）{
返回d*10；
})
svg。