Question

我是D3.js的新手，我面临基本折线图的问题。我正在按照教程创建折线图，但是在创建折线图时遇到问题。

附上我的代码，我看不到图表。

我可以看到“ path”标记已添加到SVG中，但是由于无法看到图形，因此未将“ d”属性添加到“ path”标记中。

我在控制台中看不到任何错误。我是否需要旋转/变换图形才能看到折线图？有人可以帮忙吗？

const margin = { top: 20, right: 20, bottom: 20, left: 35 };
const width = 800;
const height = 500;

const data = [
  { date: 1484145000, value: 100 },
  { date: 1484231400, value: 150 },
  { date: 1484317800, value: 200 },
  { date: 1484663400, value: 250 },
  { date: 1484749800, value: 300 }
];

const xMax = d3.max(data, d => {
  return new Date(d.date * 1000);
});

const xMin = d3.min(data, d => {
  return new Date(d.date * 1000);
});

const yMax = d3.max(data, d => {
  return d.value;
});

const yMin = d3.min(data, d => {
  return d.value;
});

const xScale = d3
  .scaleTime()
  .domain([xMin, xMax])
  .range([margin.left, width - margin.right])
  .nice();

const yScale = d3
  .scaleLinear()
  .domain([yMin, yMax])
  .range([height - margin.bottom, margin.top])
  .nice();


const svg = d3.select("svg");

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const line = d3
  .line()
  .x(d => xScale(new Date(d.date * 1000)))
  .y(d => yScale(d.value));

svg
  .selectAll("path")
  .data(data)
  .join("path")
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

svg
  .append("g")
  .attr("class", "xAxis")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "yAxis")
  .attr("transform", `translate(${margin.left},0)`)
  .call(yAxis);

.chart-svg {
  width: 800px;
  height: 500px;
}

<!DOCTYPE html>

<head>
    
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="pre-test.css">
</head>

<body>
    <div class="chart-container">
        <svg class="chart-svg"></svg>
    </div>
    <script src="pre-test.js"></script>
</body>

Answer 1

我找不到与代码有关的任何问题。由于行生成器需要一个数组，您能否尝试将数组传递给数据函数，例如.data([data])

const margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 35
};
const width = 800;
const height = 500;

const data = [{
    date: 1484145000,
    value: 100
  },
  {
    date: 1484231400,
    value: 150
  },
  {
    date: 1484317800,
    value: 200
  },
  {
    date: 1484663400,
    value: 250
  },
  {
    date: 1484749800,
    value: 300
  }
];

const xMax = d3.max(data, d => {
  return new Date(d.date * 1000);
});

const xMin = d3.min(data, d => {
  return new Date(d.date * 1000);
});

const yMax = d3.max(data, d => {
  return d.value;
});

const yMin = d3.min(data, d => {
  return d.value;
});

const xScale = d3
  .scaleTime()
  .domain([xMin, xMax])
  .range([margin.left, width - margin.right])
  .nice();

const yScale = d3
  .scaleLinear()
  .domain([yMin, yMax])
  .range([height - margin.bottom, margin.top])
  .nice();

const svg = d3.select("svg");

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const line = d3
  .line()
  .x(function(d) { 
    return xScale(new Date(d.date * 1000));
    })
  .y(function(d) {
    return yScale(d.value);
  });

svg
  .append("path")
  .data([data])
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

svg
  .append("g")
  .attr("class", "xAxis")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "yAxis")
  .attr("transform", `translate(${margin.left},0)`)
  .call(yAxis);

.chart-svg {
  width: 800px;
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="chart-container">
  <svg class="chart-svg"></svg>
</div>

Answer 2

只需将SVG路径更改为追加并使用.datum()函数而不是.data() 选中此bl.ocks.org以了解区别。

svg
  .append("path")
  .datum(data)
  .join("path")
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

这是一个有效的代码段：

const margin = { top: 20, right: 20, bottom: 20, left: 35 };
const width = 800;
const height = 500;

const data = [
  { date: 1484145000, value: 100 },
  { date: 1484231400, value: 150 },
  { date: 1484317800, value: 200 },
  { date: 1484663400, value: 250 },
  { date: 1484749800, value: 300 }
];

const xMax = d3.max(data, d => {
  return new Date(d.date * 1000);
});

const xMin = d3.min(data, d => {
  return new Date(d.date * 1000);
});

const yMax = d3.max(data, d => {
  return d.value;
});

const yMin = d3.min(data, d => {
  return d.value;
});

const xScale = d3
  .scaleTime()
  .domain([xMin, xMax])
  .range([margin.left, width - margin.right])
  .nice();

const yScale = d3
  .scaleLinear()
  .domain([yMin, yMax])
  .range([height - margin.bottom, margin.top])
  .nice();


const svg = d3.select("svg");

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const line = d3
  .line()
  .x(d => xScale(new Date(d.date * 1000)))
  .y(d => yScale(d.value));

svg
  .append("path")
  .datum(data)
  .join("path")
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

svg
  .append("g")
  .attr("class", "xAxis")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "yAxis")
  .attr("transform", `translate(${margin.left},0)`)
  .call(yAxis);

.chart-svg {
  width: 800px;
  height: 500px;
}

<!DOCTYPE html>

<head>
    
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="pre-test.css">
</head>

<body>
    <div class="chart-container">
        <svg class="chart-svg"></svg>
    </div>
    <script src="pre-test.js"></script>
</body>

在D3.js中看不到折线图

2 个答案: