时间戳

首页 > 解决方案 > 非常简单的 d3.js 折线图不在浏览器中显示

javascript - 非常简单的 d3.js 折线图不在浏览器中显示

问题描述

出于某种原因，即使我使用来自此来源的代码片段，我也无法显示非常简单的折线图：https ://www.dashingd3js.com/svg-paths-and-d3js

我对d3相当陌生。

我意识到源代码片段没有 xScale 或 yScale 变量（StackOverflow 上的一些解决方案推荐）所以我尝试将它们合并到代码片段中但无济于事......我不确定我是否正确使用了 scale 函数. 我已经获得了要显示的 svg 路径版本，但出于交互性原因，我需要将其转换为 d3 脚本。

<script src="d3.min.js"></script>

<script>

  var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
    { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
    { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

  var xScale = d3.scale.linear()
    .domain([0, 300])
    .range([0, 300]);

  var yScale = d3.scale.linear()
    .domain([0, 300])
    .range([0, 300]);

  var lineFunction = d3.svg.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d) { return yScale(d.y); })
    .interpolate("linear");

  var svgContainer = d3.select("body").append("svg")
    .attr("width", 300)
    .attr("height", 300);

  var lineGraph = svgContainer.append("path")
    .attr("d", lineFunction(lineData))
    .attr("stroke", "blue")
    .attr("stroke-width", 3)
    .attr("fill", "none");

</script>

标签： javascripthtmld3.jsdata-visualization

解决方案

您正在使用已弃用的 D3 版本 3 代码。您可以查看此链接以查看 d3 的哪些部分在 V4 和 v5 中发生了变化。

在您的代码示例中：

d3.scale.linear() 应该d3.scaleLinear()

d3.svg.line() 应该d3.line()

.interpolate("linear")应该.curve(d3.curveBasis)

另外，请确保您的脚本在<body>元素内，而不是在<head>

这是一个更正和测试的版本：

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
{ "x": 40,  "y": 10}, { "x": 60,  "y": 40},
{ "x": 80,  "y": 5},  { "x": 100, "y": 60}];

var xScale = d3.scaleLinear()
.domain([0, 300])
.range([0, 300]);

var yScale = d3.scaleLinear()
.domain([0, 300])
.range([0, 300]);

var lineFunction = d3.line()
.x(function(d) { return xScale(d.x); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveBasis);

var svgContainer = d3.select("body").append("svg")
.attr("width", 300)
.attr("height", 300);

var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 3)
.attr("fill", "none");

推荐阅读