如何在d3 v6.3.1中更新数组时更新条形图数据？
在d3 v6.3.1中更新数组时更新条形图数据，可以按照以下步骤进行操作：
- 创建一个初始的条形图，可以使用d3的
select和selectAll方法选择SVG元素，并使用data方法绑定初始数据。
const svg = d3.select("svg");
const data = [10, 20, 30, 40, 50];
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 50)
.attr("y", (d) => 100 - d)
.attr("width", 40)
.attr("height", (d) => d);- 更新数据时，首先更新数组中的数据。
data[2] = 35; // 更新索引为2的数据为35- 使用
selectAll方法选择已有的条形图元素，并使用data方法绑定更新后的数据。
svg.selectAll("rect")
.data(data)
.attr("y", (d) => 100 - d)
.attr("height", (d) => d);- 如果新的数据比原始数据多，可以使用
enter方法添加新的条形图元素。
const newData = [10, 20, 35, 45, 55, 60];
svg.selectAll("rect")
.data(newData)
.enter()
.append("rect")
.attr("x", (d, i) => i * 50)
.attr("y", (d) => 100 - d)
.attr("width", 40)
.attr("height", (d) => d);这样，当更新数组时，条形图的数据也会相应更新。注意，以上示例中的代码仅涉及到d3的基本用法，具体的实现方式可能会根据具体的需求和场景有所不同。
关于d3的更多信息和详细用法，可以参考腾讯云的d3相关产品和文档：
相关·内容
1回答
我对d3.js还不熟悉，我正在创建一个带有两个条的简单的水平条形图。我想在这两个条子上贴上文字标签。根据我的研究，下面的代码看起来是正确的，但是屏幕上没有显示文本。从dev控制台上看，似乎没有添加文本元素。
以下是javascript代码：
var dataArray = [23, 13];
var svg = d3.select("svg.d3svg")
.attr("height", "20%")
.attr("width", "100%")
.selectAll("rect")
浏览 0提问于2018-09-25得票数 1
回答已采纳
1回答
我正在用一些初始数据绘制一个条形图，然后尝试在单击按钮时进行更新。我得到错误“未定义的TypeError:无法读取属性‘长度’的未定义”。该错误发生在单击update按钮之后。如何修复这个问题并启用更新函数来绘制一个新的条形图？
<div id="chart"></div>
<button id="update" onclick="update()">Update</button>
D3代码：
var myData = [21, 3, 5, 21, 15];
//Width and
浏览 1提问于2017-11-17得票数 1
回答已采纳
1回答
我目前正在尝试在Jupyter Notebook中运行D3，有点遵循这个指南：
使用以下代码，我想将数字添加到条形图中的条形图中：
%%javascript
(function(element) {
require(['d3'], function(d3) {
var data = [1, 2, 4, 8, 16, 8, 4, 2, 1]
var svg = d3.select(element.get(0)).append('svg')
.attr('width', 400)
浏览 0提问于2020-08-24得票数 0
尝试使用d3.js创建一个简单的条形图。我还提供了一个按钮来创建随机数据，用作svg条形图的数据集。但是，svg中的条形图仅为第一个数据集呈现。即使我更改了数据集的值，条形图仍然保持不变。需要帮助。 我检查了道具，看看它们是否有变化。道具正在更新，但没有改变图表中的条形图。 App.js文件： class App extends Component {
constructor(props){
super(props)
this.state={
dataSet: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
浏览 25提问于2019-01-11得票数 3
回答已采纳
2回答
我正在使用d3.js创建一个条形图。在每个栏的顶部，我将显示一些文本。当用户悬停在条形图上时，应该显示文本。当他们悬停的时候，文字就会消失。为了做到这一点，我需要将<text>和<rect>元素分组到<g>元素中。
示例
<g class="gbar">
<rect x="0" y="50" width="10" height="50" />
<text x="15" y="40">A</t
浏览 2提问于2016-12-16得票数 7
回答已采纳
1回答
用D3动画直方图
、、
我在这个jsFiddle 上有一些代码，它为一个称为"values“的数据数组生成一个直方图。一切都很好很好。
当我想用一个名为"newData“的新数据数组更新这个直方图时，事情就出错了。我试图坚持enter()，update()，exit() D3战略(这显然是我非常新的做法)。动画的确发生了，但正如你所看到的小提琴，它只是把所有东西压到右上角。有人能指出我在这段代码(更新)中做错了什么吗？
//Animations
d3.select('#new')
.on('click', function(d,i) {
var newHist
浏览 1提问于2014-06-13得票数 1
回答已采纳
我正在制作一个基于d3的可排序的条形图，但是他没有解释如何将x轴标签和条形图一起排序，而且尽管我做了多次尝试，我还是找不到它。下面是我的代码；相关函数是"sortBars“，它位于底部，但我已经为上下文包含了其他函数。
(，但我似乎无法正确地从JSON中转换数据。)
条形高度是data.days (它是数字，即天数)；标签是data.names。我该如何分类标签？
function retirements(presidents){
var data = presidents;
var margin = {top: 20, right: 20, bottom: 18
浏览 2提问于2015-12-28得票数 6
回答已采纳
1回答
我正在尝试采用条形图示例来理解d3 v4中的数据连接。Enter selection运行良好，但我不知道如何更新。这是我到目前为止所知道的：，谁来帮帮我。
var width = 420,
barheight = 30;
var svg = d3.select('#bar-chart')
.append('svg')
.attr('width', width + 50)
.attr('height', 1000);
var scale = d3.scaleLinear
浏览 8提问于2016-08-08得票数 0
回答已采纳
在react项目中，我想使用一个纠缠在一起的树形图，比如-
我怎么使用它？既然D3是开源库，那么上面的示例代码也是开源的吗？
我是D3的初学者。到目前为止，1.安装了D3库和npm install d3 --save 2.创建了D3 basic条形图来检查d3是否正常工作
而不是条形图，希望使用上面共享的纠缠树可视化。但它似乎使用了由observablehq生成的最小化的runtime.js。
BarChart.js
import React from 'react';
import * as d3 from 'd3';
import { Runtime,
浏览 70提问于2020-05-19得票数 0
回答已采纳
1回答
我想用新的数据来更新条形图，我查看了这个问题：，但是它不适合我。可能是因为我不知道在代码中将exit().remove()函数放在哪里。我试着把这句话
svg.selectAll("rect").exit().remove();
在create部分下面，但它只删除所有标签。然后，如果我把它放在创建标签部分之后，它就会完全删除图表。如何让更新按钮用新的数据更改图表？
function draw(data) {
//Width and height
var w = 250;
var h = 250;
var
浏览 0提问于2017-11-09得票数 3
回答已采纳
2回答
我刚刚开始使用D3和JS，我试图在条形图中添加一个X轴。它没有出现。我认为这是因为代码底部的svg.append("g")是不正确的(没有变量g)。哪里应该有什么杂货呢？
barchart.js
// Create data array of values to visualize
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];
// Create variable for the SVG
var svg = d3.select("body").append("svg")
浏览 2提问于2017-09-28得票数 1
回答已采纳
我对d3很陌生。我有这个，它很有用：
<script type="text/javascript">
var w = 620;
var h = 30;
var father = [ true, true, false, false, false ];
//Create SVG element
var svg = d3.select("#parentsmed")
.append("svg")
.attr("height", h)
.attr(
浏览 1提问于2013-08-01得票数 1
回答已采纳
我第一次使用D3.js，我用这个代码画了一个条形图。 var dataset = [20, 55, 30, 40, 50, 35, 97, 75, 100, 45];
var w = 500;
var h =100;
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0,w])
.paddingInner(0.05);
var yScale = d3.scaleBand()
浏览 22提问于2020-04-24得票数 0
回答已采纳
1回答
我想在单击时更新数据，但是正在更改的条形图并不是正确的。有件事我不能用选择来解决。单击灰条，这应该是bar2正在更新。应该是酒吧。
示例：
D3图表：
var values = feature.properties;
var data = [
{name:"Employment rate",value:values["ERate15P"]},
{name:"Participation rate",value:values["PR15P"]},
{name:"Unemployment rate"
浏览 4提问于2016-01-15得票数 0
回答已采纳
1回答
您好，我是d3新手，我无法更新条形图中的数据。我正在使用下面的代码创建条形图。
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter) + 1; })
.attr("y", function(d) { return y(d.frequency); })
.attr("width", x.bandwi
浏览 5提问于2017-01-24得票数 0
回答已采纳
1回答
我的目标是使用示例数据在页面上显示条形图。我希望有一个x轴和y轴。 我遵循了一个关于如何创建D3.JS条形图的教程，在我添加x和y轴之前，它工作得很好。我原本希望条形图适合轴的内部，但实际结果是条形图在轴的外部。我在控制台中没有收到任何错误消息。 我已经尝试重新定位代码，以便在轴之前和之后创建条形图时都不会感到高兴。 var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500,
svgHeight = 300,
barPadding = 5;
var barWidth = (svgWidth
浏览 19提问于2020-07-02得票数 1
回答已采纳
在这段代码中，我使用了Angular 2和D3 v3.5。只要Service中的值发生更改，就会在现有图形的下方显示一个新图形，而不是更改现有图形的值。这是创建图形的一部分。请帮助我如何在单个图形中使其动态？我尝试过使用.exit()和.remove()方法，但没有成功。
public renderChart() {
let obj = {
0: 'Bar 1',
1: 'Bar 2',
2: 'Bar 3',
3: 'Bar 4',
4: 'Bar 5&
浏览 0提问于2018-08-11得票数 1
2回答
我按照教程从左对齐的Scott Murray制作了一个条形图。我的数据集出现问题，并将数据集作为文本添加到条形图中。
下图:1条形图:来自教程的第二个条形图:我想如何显示文本。
到目前为止，我的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial d3 bar chart!</title>
<script
浏览 4提问于2015-06-12得票数 2
1回答
我正在创建一个条形图，作为d3中更大的数据可视化的一部分。我想要能够改变数据在一个部分的可视化和所有的图表将被更新。图表的简化版本如下。
var dataset = [1, 3, 5, 3, 3];
...
var svg = d3.select("body #container").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
...
我用这个s
浏览 5提问于2015-03-25得票数 0
回答已采纳
我一直试图使用d3.js显示一个使用两个输入字符串的表，我添加了下面的代码。当显示第二个字符串时，只显示索引大于字符串x长度的字符。
我认为这与匿名函数有关，在迭代第二个字符串时，我从它在第一个字符串中完成的索引值开始，例如，只从第二个字符串显示"fo“，而不是"fresihnfo”。有人能给我一些关于如何解决这个问题的建议吗？
谢谢!
var x = ["a", "e", "d", "i", "r", "z"];
var y = ["f
浏览 1提问于2014-01-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
