我創建了一個條形圖并使用模式來填充它。現在我希望通過單擊“更改模式”按鈕將第二個柱的模式更改為新模式，如圖所示。
我知道重新創建整個條形圖可能是一個解決方案。但我想知道是否有一種方法只能選擇目標條并更改其模式。先感謝您。
我的代碼：
<!doctype html>
<html>
<head>
<style>
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<button id="patternBtn">Change Pattern </button>
<svg id = "barchart" width="600" height="500"></svg>
<svg width="600" height="500">
<defs>
<pattern id="pattern1"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern2"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="5" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern3"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="3" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="newPattern"
x="5" y="5" width="20" height="20"
patternUnits="userSpaceOnUse" >
<rect x="0" y="0" width="5" height="5" fill="red"/>
</pattern>
</defs>
<rect x="0" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="100" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern2);" />
<rect x="200" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern3);" />
<rect x="0" y="100" width="100" height="100"
style="stroke: #000000; fill: url(#newPattern);" />
</svg>
</body>
<script>
var data = [{ year: '2001', value:10 },
{ year: '2002', value:30 },
{ year: '2003', value:20 },
]
var svg = d3.select("#barchart"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
var xScale = d3.scaleBand().range([0, width]).padding(0.4),
yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" 100 "," 100 ")");
xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("transform", "translate(0," height ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return d;
}).ticks(10));
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.year); })
.attr("y", function(d) { return yScale(d.value); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.value); })
.attr('stroke', "black")
.attr('stroke-width', '1')
.attr("fill", function(d,i) { return "url(#pattern" (i 1) ")"});
</script>
</html>uj5u.com熱心網友回復：
由于我們只想在點擊時更改第二個欄的 css，這應該通過為第二個欄分配不同的類來完成，將函式應用于類屬性。應用不同的類后，單擊捕獲該類的欄并更改模式。請參閱下文，了解它是如何完成的。我保留了一個計數器來更改每次點擊時的模式，您可以根據需要更改
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<style>
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<button id="patternBtn">Change Pattern </button>
<svg id="barchart" width="600" height="500"></svg>
<svg width="600" height="500">
<defs>
<pattern id="pattern1"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern2"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="5" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern3"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="3" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern4"
x="5" y="5" width="20" height="20"
patternUnits="userSpaceOnUse" >
<rect x="0" y="0" width="5" height="5" fill="red"/>
</pattern>
</defs>
<rect x="0" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="100" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern2);" />
<rect x="200" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern3);" />
<rect x="0" y="100" width="100" height="100"
style="stroke: #000000; fill: url(#pattern4);" />
</svg>
</body>
<script>
var patternCount = 1;
var data = [{
year: '2001',
value: 10
},
{
year: '2002',
value: 30
},
{
year: '2003',
value: 20
},
]
var svg = d3.select("#barchart"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
var xScale = d3.scaleBand().range([0, width]).padding(0.4),
yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" 100 "," 100 ")");
xScale.domain(data.map(function(d) {
return d.year;
}));
yScale.domain([0, d3.max(data, function(d) {
return d.value;
})]);
g.append("g")
.attr("transform", "translate(0," height ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d) {
return d;
}).ticks(10));
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function(d, index) {
return "bar" index
})
.attr("x", function(d) {
return xScale(d.year);
})
.attr("y", function(d) {
return yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return height - yScale(d.value);
})
.attr('stroke', "black")
.attr('stroke-width', '1')
.attr("fill", function(d, i) {
return "url(#pattern" (i 1) ")"
});
$('#patternBtn').on("click", function() {
d3.select(".bar1")
.attr("fill", `url(#pattern${patternCount})`);
patternCount ;
if (patternCount > 4) patternCount = 1;
});
</script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/491654.html
標籤：javascript html css svg d3.js
下一篇：選擇特定節點NetworkD3