- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 D3 与 React 集成,请在下面找到代码片段。
在代码中,我试图在 D3 中实现一个简单的行并使用react。但我最终得到 Error: <path> attribute d: Expected number, "MNaN,191.94630872…
在 stackoverflow 上有类似的问题,但他们也没有帮助。
attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". react with d3
"Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". " Error with D3
我尝试做的几件事。
A:最初我认为日期解析有问题,所以我更改了 day
number
的关键并删除了日期解析,我最终遇到了同样的错误。
B:A 假设 x 和 y 的域声明存在一些问题。我删除了扩展并给出了一个离散值,仍然面临同样的错误。
import React, { Component } from 'react';
import * as d3 from "d3";
class LineChart extends Component {
constructor(props) {
super(props);
this.state = {selected: props.width || null};
}
componentWillMount() {
}
componentWillReceiveProps(nextProps) {
}
render() {
let data=[
{day:'02-11-2016',count:180},
{day:'02-12-2016',count:250},
{day:'02-13-2016',count:150},
{day:'02-14-2016',count:496},
{day:'02-15-2016',count:140},
{day:'02-16-2016',count:380},
{day:'02-17-2016',count:100},
{day:'02-18-2016',count:150}
];
let margin = {top: 5, right: 50, bottom: 20, left: 50},
w = this.state.width - (margin.left + margin.right),
h = this.props.height - (margin.top + margin.bottom);
let parseDate = d3.timeParse("%m-%d-%Y");
data.forEach(function (d) {
d.date = parseDate(d.day);
});
let x = d3.scaleTime()
.domain(d3.extent(data, function (d) {
return d.date;
}))
.range([0, w]);
let y = d3.scaleLinear()
.domain([ 0 , d3.max( data, function(d) {
return d.count + 100;
})])
.range([ h, 0 ]);
let line = d3.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.count);
}).curve(d3.curveCardinal);
let transform = 'translate(' + margin.left + ',' + margin.top + ')';
return (
<div>
<p>LineChart</p>
<svg id={this.props.chartId} width={this.state.width} height={this.props.height}>
<g transform={transform}>
<path className="line shadow" d={line(data)} strokeLinecap="round"/>
</g>
</svg>
</div>
)
}
}
LineChart.defaultProps = {
width: 800,
height: 300,
chartId: 'v1_chart'
}
export default LineChart;
最佳答案
你在这个字符串上的错误:
w = this.state.width - (margin.left + margin.right)
如果你输入 console.log(this.state.width)
你会得到 undefined
。您将 w
变量用于 d3 标度,因此它们会产生不正确的值。您可以通过这种方式将图表 width
作为组件 Prop 传递:
<LineChart width={600} height={300} />
并指定w
变量:
let margin = {top: 5, right: 50, bottom: 20, left: 50},
w = this.props.width - (margin.left + margin.right), // <== !!!
h = this.props.height - (margin.top + margin.bottom);
检查下面的工作演示:
class LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {selected: props.width || null};
}
componentWillMount() {
}
componentWillReceiveProps(nextProps) {
}
render() {
let data=[
{day:'02-11-2016',count:180},
{day:'02-12-2016',count:250},
{day:'02-13-2016',count:150},
{day:'02-14-2016',count:496},
{day:'02-15-2016',count:140},
{day:'02-16-2016',count:380},
{day:'02-17-2016',count:100},
{day:'02-18-2016',count:150}
];
let margin = {top: 5, right: 50, bottom: 20, left: 50},
w = this.props.width - (margin.left + margin.right),
h = this.props.height - (margin.top + margin.bottom);
let parseDate = d3.timeParse("%m-%d-%Y");
data.forEach(function (d) {
d.date = parseDate(d.day);
});
let x = d3.scaleTime()
.domain(d3.extent(data, function (d) {
return d.date;
}))
.range([0, w]);
let y = d3.scaleLinear()
.domain([ 0 , d3.max( data, function(d) {
return d.count + 100;
})])
.range([ h, 0 ]);
let line = d3.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.count);
}).curve(d3.curveCardinal);
let transform = 'translate(' + margin.left + ',' + margin.top + ')';
return (
<div>
<p>LineChart</p>
<svg id={this.props.chartId} width={this.state.width} height={this.props.height}>
<g transform={transform}>
<path className="line shadow" d={line(data)} strokeLinecap="round"/>
</g>
</svg>
</div>
)
}
}
ReactDOM.render(
<LineChart width={600} height={200} />,
document.getElementById('container')
);
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
关于javascript - 错误 : <path> attribute d: Expected number, "MNaN,191.94630872…"。 d3 错误并使用react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47808553/
从 angular 5.1 更新到 6.1 后,我开始从我的代码中收到一些错误,如下所示: Error: ngc compilation failed: components/forms/utils.
我正在学习 Typescript 并尝试了解类型和接口(interface)的最佳实践。我正在玩一个使用 GPS 坐标的示例,想知道一种方法是否比另一种更好。 let gps1 : number[];
type padding = [number, number, number, number] interface IPaddingProps { defaultValue?: padding
这两种格式在内存中保存结果的顺序上有什么区别吗? number = number + 10; number += 10; 我记得一种格式会立即保存结果,因此下一行代码可以使用新值,而对于另一种格式,
在 Python 匹配模式中,如何匹配像 1 这样的文字数字在按数字反向引用后 \1 ? 我尝试了 \g用于此目的的替换模式中可用的语法,但它在我的匹配模式中不起作用。 我有一个更大的问题,我想使用一
我的源文件here包含 HTML 代码,我想将电话号码更改为可在我的应用程序中单击。我正在寻找一个正则表达式来转换字符串 >numbernumber(\d+)$1numbernumber<",我们在S
我们有一个包含 2 个字段和一个按钮的表单。我们想要点击按钮来输出位于 int A 和 int B 之间的随机整数(比如 3、5 或 33)? (不需要使用 jQuery 或类似的东西) 最佳答案 你
我收到以下类型错误(TypeScript - 3.7.5)。 error TS2345: Argument of type '(priority1: number, priority2: number
只想创建简单的填充器以在其他功能中使用它: function fillLine(row, column, length, bgcolor) { var sheet = SpreadsheetApp
我有一个问题。当我保存程序输出的 *.txt 时,我得到以下信息:0.021111111111111112a118d0 以及更多的东西。 问题是: 这个数字中的“d0”和“a”是什么意思? 我不知道“
首先:抱歉标题太长了,但我发现很难用一句话来解释这个问题;)。是的,我也四处搜索(这里和谷歌),但找不到合适的答案。 所以,问题是这样的: 数字 1-15 将像这样放在金字塔中(由数组表示):
我想从字符串中提取血压。数据可能如下所示: text <- c("at 10.00 seated 132/69", "99/49", "176/109", "10.12 I 128/51, II 1
当尝试执行一个简单的 bash 脚本以将前面带有 0 的数字递增 1 时,原始数字被错误地解释。 #!/bin/bash number=0026 echo $number echo $((number
我有一个类型为 [number, number] 的字段,TypeScript 编译器(strict 设置为 true)出现问题,提示初始值值(value)。我尝试了以下方法: public shee
你能帮我表达数组吗:["232","2323","233"] 我试试这个:/^\[("\d{1,7}")|(,"\d{1,7}")\]$/ 但是这个表达式不能正常工作。 我使用 ruby(rail
这个问题在这里已经有了答案: meaning of (number) & (-number) (4 个回答) 关闭6年前. 例如: int get(int i) { int res = 0;
我正在考虑使用 Berkeley DB作为高度并发的移动应用程序后端的一部分。对于我的应用程序,使用 Queue对于他们的记录级别锁定将是理想的。但是,如标题中所述,我需要查询和更新概念建模的数据,如
我正在尝试解决涉及重复数字的特定 JavaScript 练习,为此我需要将重复数字处理到大量小数位。 目前我正在使用: function divide(numerator, denominator){
我有这个数组类型: interface Details { Name: string; URL: string; Year: number; } interface AppState {
我们正在使用 Spring 3.x.x 和 Quartz 2.x.x 实现 Web 应用程序。 Web 服务器是 Tomcat 7.x.x。我们有 3 台服务器。 Quartz 是集群式的,因此所有这
我是一名优秀的程序员,十分优秀!