按下按钮更新条形图
我是 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回答
-
波斯汪
这个...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>
随时随地看视频慕课网APP
相关分类
JavaScript