gpt4 book ai didi

javascript - 使用 D3 将背景图像转换为 SVG 等值线图

转载 作者:行者123 更新时间:2023-11-29 15:40:01 32 4
gpt4 key购买 nike

我正在使用美国各州的 D3 制作等值线图,并且已经有了使用填充渲染具有纯色背景的 map 的代码。

但是,我希望状态路径的填充是图像。我尝试将路径 background-image 设置为 img 的 URL,但这没有用。

我该怎么做?我还想为每个状态填充不同的图像。

var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);

svg.append("rect")
.attr("class", "background")
.attr("fill","none")
.attr("width", width)
.attr("height", height);

var g = svg.append("g")
.attr("class", "states");

$(document).ready(function() {
d3.json("us-states.json", function(json) {
var features = json.features;
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "purple")
.attr("stroke","white")
.attr("stroke-width", 1);
});
});

最佳答案

正如 Superboggly 指出的那样,首先定义一个模式,然后使用它。

定义示例:

<defs>
<pattern id="chloroplethbackground" patternUnits="userSpaceOnUse" width="??" height="??">
<image xlink:href="bg.jpg" x="0" y="0" width="??" height="??" />
</pattern>
</defs>

然后将您的fill设置为url(#chloroplethbackground)

所以会是:

var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);

svg.append("rect")
.attr("class", "background")
.attr("fill","none")
.attr("width", width)
.attr("height", height);

var g = svg.append("g")
.attr("class", "states");

$(document).ready(function() {
d3.json("us-states.json", function(json) {
var features = json.features;
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "url(#chloroplethbackground)")
.attr("stroke","white")
.attr("stroke-width", 1);
});
});

关于javascript - 使用 D3 将背景图像转换为 SVG 等值线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20848905/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com