- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何用新数据更新图表?我有一个图表,显示两个日期之间的价格范围。然后我添加了两个日期选择器来定义日期。当我选择新日期并更新图表时,它会将新图表覆盖在旧图表上。如何删除旧数据并用新数据显示图表?我刚刚开始使用 d3,但仍然不知道如何更新它
import React, { Component } from "react"
import * as d3 from "d3"
import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css"
import moment from "moment"
import "./App.css"
class App extends Component {
state = {
data: null,
startDate: new Date("2017-12-31"),
endDate: new Date("2018-04-01"),
isDateChanged: false,
}
async getData() {
const { startDate, endDate } = this.state
let startTime = moment(startDate).format("YYYY-MM-DD")
let endTime = moment(endDate).format("YYYY-MM-DD")
try {
const response = await fetch(
`https://api.coindesk.com/v1/bpi/historical/close.json?start=${startTime}&end=${endTime}`,
)
const json = await response.json()
this.parseData(json)
} catch (error) {
console.log(error)
}
}
handleChange(date, type) {
if (type === "startDate") {
this.setState({
startDate: date,
})
} else {
this.setState({
endDate: date,
})
}
}
parseData(data) {
var arr = []
for (let i in data.bpi) {
arr.push({
date: new Date(i),
price: data.bpi[i],
})
}
this.setState({
data: arr,
})
}
displayChart(data) {
let height = 400
let width = 600
let maxDate = d3.max(data, d => d.date)
let minDate = d3.min(data, d => d.date)
let maxPrice = d3.max(data, data => data.price)
let y = d3
.scaleLinear()
.domain([0, maxPrice])
.range([height, 0])
let x = d3
.scaleTime()
.domain([minDate, maxDate])
.range([0, width])
let yAxe = d3.axisLeft(y)
let xAxe = d3.axisBottom(x)
let svg = d3
.select("svg")
.attr("height", "600")
.attr("width", "800")
let group = svg.append("g").attr("transform", "translate( 50 , 50)")
let line = d3
.line()
.x(d => x(d.date))
.y(d => y(d.price))
group.append("path").attr("d", line(data))
group
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxe)
group.append("g").call(yAxe)
}
componentDidUpdate(prevProps, prevState) {
if (prevState.data !== this.state.data) {
this.displayChart(this.state.data)
}
if (prevState.isDateChanged !== this.state.isDateChanged) {
this.getData()
}
}
componentDidMount() {
this.getData()
}
render() {
return (
<div className="canvas">
<div>
<DatePicker
selected={this.state.startDate}
onChange={(date, startDate) => this.handleChange(date, "startDate")}
/>
<DatePicker
selected={this.state.endDate}
onChange={(date, endDate) => this.handleChange(date, "endDate")}
/>
<button onClick={() => this.setState({ isDateChanged: true })}>
Enter
</button>
</div>
<h1> Bitcoin price chart</h1>
<svg className="line-chart" />
</div>
)
}
}
export default App
最佳答案
您可以选择 svg
的所有子项并使用以下行将其删除:
svg.selectAll("*").remove();
将其粘贴到您的 displayChart
函数中:
displayChart(data) {
...
let svg = d3
.select("svg")
.attr("height", "600")
.attr("width", "800")
svg.selectAll("*").remove();
let group = svg.append("g").attr("transform", "translate( 50 , 50)")
...
}
关于javascript - D3.js 如何在有新数据时更新图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56283478/
我正在尝试使用 tkinter 创建一个类似点击器的游戏作为练习。我对 tkinter 很陌生,所以如果问题非常基本,我深表歉意。我设置了一个按钮来添加点击次数,并且我还尝试设置自动点击功能。我的代码
我想以特定方式更新表 A 中的第 1 列:当列中的第三个字符是“_”时,我想插入前 2 个字符,如果第三个字符还有其他任何内容,我想保留它是。 例子: |col1|
我用 View 模型组装了一个简单的登录 fragment 。这是 fragment : class LoginFragment : Fragment() { companion object {
是否可以在 mySQL 中的创建表语句中编写更新语句?假设我们有两个不同的表。当我在一个表上插入某些内容时,我想更改另一表中的值。这在 mySQL 中可能吗 最佳答案 需要更多规范。 如果您有 2 个
我组合了一个简单的发布/订阅模式,以允许动态实例化和运行多个 JavaFX 类。这些类中的每一个(“订阅者”)都旨在可视化来自具有“发布者”角色的模型(在模型/ View / Controller 意
我正在使用 pygame 并在主循环的每个循环中更新到屏幕。我不明白的是,在我添加一个 for 循环查找事件之前,什么都不会更新,然后突然所有更新都发生了。这是为什么? def run(self
我是 React 的初学者;我知道 setState 是异步的,但我不明白为什么在示例笔中下方框下方的刷新不会立即完成,而仅在输入第二个字符后才更新。 Codepen:(已更新以链接到正确的笔) ht
我在 Java 程序中有两个选项卡。一个用于添加股票,另一个用于列出我创建的股票。当我在第二个选项卡中添加新项目时,我试图设法更新第一个选项卡中的项目列表。有任何想法吗? 我希望第一个选项卡显示我在第
我有一个 Activity A。加载 A 后,单击 A 中的按钮会在 A 的主页布局上添加 fragment F。现在一旦进入 F,如果我正在调用 getActivity().getSupportFr
下面提供的这段代码中的 friend 们,我想在从播放 Intent 恢复时刷新我的 TextView 。但是每当我尝试在 OnCreate 之外但在我的主类中定义我的 textview 时(在 st
我是 Postgres 的新手。我正在尝试使用 java/postgres jdbc 执行以下代码(适用于 MySQL): for (int i = 0; i < arr.size(); i++) {
目前,我有一个更新函数,可以更新一行,但如果我将其中一个框留空,而不是不更改该值,则该值将被删除。如果我只需要更新其中一个值,我想更新该值并将其他框留空。这可能吗? 目前我的代码是这样的。 最佳答案
我正在编写 JavaScript,它正在为一个项目计数到一定数量。数量可能在 100,000 左右,完成处理大约需要 10-15 秒。我希望脚本在用户调用页面时立即运行,并在脚本完成时进行重定向。是否
每当具有不同输入 ID 的另一个 selectInput 的值发生变化时,我需要更改一个具有自己输入 ID 的 selectInput 的值。 在 javascript 中,这将是 onchage,但
我正在尝试弄清楚如何在将视频上传到服务器时更新我的 UIProgressView。该视频是用户选择的视频,这是我上传到我的服务器的代码: NSMutableArray *array = [[NSM
我想在单击 h:commandButton 时更新 id="contents"的 div,但复杂的部分是 h:commandButton 位于 c:forEach Click Me
我目前正在构建一个读取数组并将其显示在 TableView 上的 UITableView。我不断地添加到数组中,我希望在 View 上有一个按钮,一旦单击它就会更新 UITableView。 如何从我
我在 StructuredProperty 中有一个 ComputedProperty,它在首次创建对象时不会更新。 当我创建对象时 address_components_ascii 没有被保存。该字
我知道 SCNPhysicsBody 在节点缩放时不会缩放,但我还没有找到解决此问题的好方法。我想缩放节点,然后在缩放后将 SCNPhysicsBody 更新为节点。 let box = SCNBox
我在自定义 UITableViewCell 中有一个 UILabel,当设备旋转时,它会调整大小。旋转后需要重新计算此标签中的文本,因为我要将其缩小到适当大小并在末尾附加一些文本。 例如数据模型有:“
我是一名优秀的程序员,十分优秀!