我是 D3-v5 的新手，正在尝试使用更新按钮（随机值）创建条形图。我按照下面的代码创建了所有东西， <body> <button onclick="updateData()">Update</button> <!-- Bar Chart for SVG--> <svg width ="500" height="500" id="svg2"> </svg><script src="https://d3js.org/d3.v5.min.js"></script><script> //Bar Chart //Creating data let data2 = [ {name: 'A', value: Math.floor(Math.random() * 100)}, {name: 'B', value: Math.floor(Math.random() * 100)}, {name: 'C', value: Math.floor(Math.random() * 100)}, {name: 'D', value: Math.floor(Math.random() * 100)}, {name: 'E', value: Math.floor(Math.random() * 100)}, {name: 'F', value: Math.floor(Math.random() * 100)}, {name: 'G', value: Math.floor(Math.random() * 100)}, {name: 'H', value: Math.floor(Math.random() * 100)}, {name: 'I', value: Math.floor(Math.random() * 100)}, {name: 'J', value: Math.floor(Math.random() * 100)} ] //Creating svg, margin, width, height let svg2 = d3.select("#svg2") let margin = 30; let width = 500 - 2 * margin; let height = 500 - 2 * margin; //Creating chart by using g in svg2. let chart2 = svg2.append('g') .attr('transform', 'translate(30, 30)'); //yScale let yScale2 = d3.scaleLinear() .range([height, 0]) .domain([0, 100]); //append g to create y axis chart2.append('g') .call(d3.axisLeft(yScale2)); //xScale let xScale2 = d3.scaleBand() .range([0, width]) .domain(data2.map((d) => d.name)) .padding(0.2); //append g to create x axis chart2.append('g') .attr('transform', 'translate(0, 440)') .call(d3.axisBottom(xScale2)); //Creating color scale using scaleOrdinal and schemeCategory10 let colorScale = d3.scaleOrdinal(d3.schemeCategory10)但是，当我按下 HTML 中的更新按钮时，它会转换并重叠图表，如下图所示，唯一需要更改的是条形图，但所有条形图都在随值转换。所以我试图从网上谷歌它找出，但找不到它..我需要编辑或添加哪些内容..？有人可以帮我吗？
1 回答
波斯汪
TA贡献1811条经验 获得超4个赞
这个...
let u2 = chart2.selectAll()
……和……一样
let u2 = chart2.selectAll(null)
...这是保证您的输入选择始终包含数据数组中的所有元素的最佳方法。您可以在此处阅读：选择 null：D3.js 中“selectAll(null)”背后的原因是什么？
显然，这不是你想要的。所以，简单的修复是：
let u2 = chart2.selectAll("rect")另外，请考虑使用 key 函数，否则您将通过索引连接数据。
这是带有该更改的代码：
<body>
<button onclick="updateData()">Update</button>
<!-- Bar Chart for SVG-->
<svg width="500" height="500" id="svg2">
</svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//Bar Chart
//Creating data
let data2 = [{
name: 'A',
value: Math.floor(Math.random() * 100)
},
{
name: 'B',
value: Math.floor(Math.random() * 100)
},
{
name: 'C',
value: Math.floor(Math.random() * 100)
},
{
name: 'D',
value: Math.floor(Math.random() * 100)
},
{
name: 'E',
value: Math.floor(Math.random() * 100)
},
{
name: 'F',
value: Math.floor(Math.random() * 100)
},
{
name: 'G',
value: Math.floor(Math.random() * 100)
},
{
name: 'H',
value: Math.floor(Math.random() * 100)
},
{
name: 'I',
value: Math.floor(Math.random() * 100)
},
{
name: 'J',
value: Math.floor(Math.random() * 100)
}
]
//Creating svg, margin, width, height
let svg2 = d3.select("#svg2")
let margin = 30;
let width = 500 - 2 * margin;
let height = 500 - 2 * margin;
//Creating chart by using g in svg2.
let chart2 = svg2.append('g')
.attr('transform', 'translate(30, 30)');
//yScale
let yScale2 = d3.scaleLinear()
.range([height, 0])
.domain([0, 100]);
//append g to create y axis
chart2.append('g')
.call(d3.axisLeft(yScale2));
//xScale
let xScale2 = d3.scaleBand()
.range([0, width])
.domain(data2.map((d) => d.name))
.padding(0.2);
//append g to create x axis
chart2.append('g')
.attr('transform', 'translate(0, 440)')
.call(d3.axisBottom(xScale2));
//Creating color scale using scaleOrdinal and schemeCategory10
let colorScale = d3.scaleOrdinal(d3.schemeCategory10)
//Selecting all in chart2 to set/append rectangular, and axis.
chart2.selectAll()
.data(data2)
.enter()
.append('rect')
.attr('x', (d) => xScale2(d.name))
.attr('y', (d) => yScale2(d.value))
.attr('height', (d) => height - yScale2(d.value))
.attr('width', xScale2.bandwidth())
//Putting colors on the bar
chart2.selectAll('rect')
.style('fill', d => colorScale(d.name));
function updateData() {
let data2 = [{
name: 'A',
value: Math.floor(Math.random() * 100)
},
{
name: 'B',
value: Math.floor(Math.random() * 100)
},
{
name: 'C',
value: Math.floor(Math.random() * 100)
},
{
name: 'D',
value: Math.floor(Math.random() * 100)
},
{
name: 'E',
value: Math.floor(Math.random() * 100)
},
{
name: 'F',
value: Math.floor(Math.random() * 100)
},
{
name: 'G',
value: Math.floor(Math.random() * 100)
},
{
name: 'H',
value: Math.floor(Math.random() * 100)
},
{
name: 'I',
value: Math.floor(Math.random() * 100)
},
{
name: 'J',
value: Math.floor(Math.random() * 100)
}
]
let u2 = chart2.selectAll("rect")
.data(data2)
u2
.enter()
.append('rect')
.merge(u2)
.transition()
.duration(1000)
.attr('x', (d) => xScale2(d.name))
.attr('y', (d) => yScale2(d.value))
.attr('height', (d) => height - yScale2(d.value))
.attr('width', xScale2.bandwidth())
chart2.selectAll('rect')
.style('fill', d => colorScale(d.name));
}
</script>
添加回答
举报
0/150
提交
取消