gpt4 book ai didi

javascript - D3 Graph 在 Chromium 中工作,但在其他浏览器中不工作

转载 作者:行者123 更新时间:2023-11-28 06:30:56 26 4
gpt4 key购买 nike

我正在尝试访问 d3 js 中的日期和一些值。分享我的 fiddle ,任何人都可以帮助我纠正我的代码,并且任何人都可以告诉我错误。

<!DOCTYPE html>
<html>
<head>
<title>trial</title>
<link rel="stylesheet" href="css/style.css">
<body>
<svg id="visualisation" width="1000" height="500"></svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>

<script src="js/index.js"></script>
</body>
</html>

https://jsfiddle.net/c6jf5yg0/6/

观察:属性 id 在浏览器中计算不正确。 提前致谢

最佳答案

在日期和时间之间添加“T”,即 ECMA 规范
http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15
http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.2

工作演示:

        InitChart();

function InitChart() {

var lineData = [{
"x": "2016-01-08T03:01:19.418110",
"y": 0.8076999999999999
}, {
"x": "2016-01-08T05:10:19.838509",
"y": 0.692666666666667
}, {
"x": "2016-01-08T09:54:13.022163",
"y": 0.5674333333333333
}];

var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},

xRange = d3.time.scale()
.range([MARGINS.left, WIDTH - MARGINS.right])
.domain(d3.extent(lineData, function(d) {
return new Date(d.x);
})),

yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
return d.y;
}),
d3.max(lineData, function(d) {
return d.y;
})
]),

xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true)
.tickFormat(d3.time.format('%X')),

yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);


vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);

vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);

var lineFunc = d3.svg.line()
.x(function(d) {
return xRange(new Date(d.x));
})
.y(function(d) {
return yRange(d.y);
})
.interpolate('linear');

vis.append("svg:path")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");

}
<!DOCTYPE html>
<html>
<head>
<title>trial</title>
<body>
<svg id="visualisation" width="1000" height="500"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
</body>
</html>

关于javascript - D3 Graph 在 Chromium 中工作,但在其他浏览器中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34715863/

26 4 0