d3 条形图：无法查看我的图表。 append() 可能有问题答案

【问题标题】：d3 Bar Graph: Trouble seeing my Graph. might be issue with append()d3 条形图：无法查看我的图表。 append() 可能有问题
【发布时间】：2019-09-11 05:07:21
【问题描述】：

我正在尝试构建条形图，但当我将其加载到本地服务器时，我的 html 页面上看不到任何内容。

这是我的 java 脚本：

var formatYear = d3.timeFormat("%Y");

var svg = d3.select('body').select('svg')
const width = d3.select('body').append('svg').attr('width');
const height = d3.select('body').append('svg').attr('height');

// create d3 data join

// load csv file
d3.csv('q3.csv').then(data => {
  data.forEach(d => {
    d.year = Date(+d.year, 1, 0); //parse data
    d.running_total = +d.running_total // parse data
  });
  render(data);
});

const render = data => {
  const xValue = d => d.running_total;
  const yValue = d => d.year;
  const xScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.running_total)])
    .range([0, d3.max(data, d => d.year)]);
  const yScale = d3.scaleBand()
    .domain(data.map(d => d.year))
    .range([0, height]);
  svg.selectAll('rect').data(data)
    .enter().append('rect')
    .attr('y', d => yScale(d.running_total))
    .attr('width', d => xScale())
    .attr('height', yScale.bandwidth())
};

我首先检查以确保我的数据已正确加载并且确实如此。我在控制台上看到它。我认为我的 append.() 函数有问题，但我已经广泛搜索，它们似乎都有相同的概念： 1.您有一个元素（在这种情况下为矩形） 2. 你有你的数据 3. 将数据追加到元素

这部分代码似乎是错误的，但我似乎无法弄清楚。

这是我的html代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Lego Sets by Year from Rebrickable</title>
  <script type="text/javascript" src="lib/d3/d3.min.js"></script>
</head>

<body>
  <svg width='960' height='500'></svg>
  <script type="text/javascript" src="main1.js"></script>
  <h1>Lego Sets by Year from Rebrickable</h1>
  <P align=right>xxxxxxx <P>
</body>

</html>

这是我的 csv 文件的第一行：

 year   running_total
1949    5

【问题讨论】：

您的 HTML 中没有 SVG。因此，这个：var svg = d3.select('body').select('svg') 是 null。
我在正文下添加了以下内容：但我什么也没得到。虽然没有错误
请添加“q3.csv”示例
运行年_总计 1949 5
@altocumulus 我能够解析数据。问题是我可以在控制台上看到矩形（元素），但在网页上看不到。它们有一个高度和宽度。

标签： javascript html d3.js svg

【解决方案1】：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Lego Sets by Year from Rebrickable</title>
</head>

<body>
  <svg width='960' height='500'></svg>
  <h1>Lego Sets by Year from Rebrickable</h1>
  <P align=right>xxxxxxx <P>
</body>

<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">

  var formatYear = d3.timeFormat("%Y");

  var svg = d3.select("svg");            // Line 20
  const width = svg.attr('width');       // Line 21
  const height = svg.attr('height');     // Line 22

  // create d3 data join

  // load csv file
  d3.dsv(" ", "q3.csv").then(data => {       // Line 27
    data.forEach(d => {
      // d.year = Date(+d.year, 1, 0);       // Line 29
      // d.running_total = +d.running_total  // Line 30
    });
    render(data);
  });

  const render = data => {
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.running_total)])
      .range([0, width]);                               // Line 38

    const yScale = d3.scaleBand()
      .domain(data.map(d => d.year))
      .range([0, height])
      .padding(0.1);                                    // Line 43

    svg.selectAll('rect').data(data)
      .enter().append('rect')
      .attr("x", 0)                                     // Line 47
      .attr('y', d => yScale(d.year))                   // Line 48
      .attr('width', d => xScale(d.running_total))      // Line 49
      .attr('height', yScale.bandwidth())

  };

</script>

</html>

您好，我对您的代码做了一些更改。

第 20-22 行，只留下一个 'svg' 元素。
第 29-30 行，不需要数据解析。如果您需要轴格式，请使用d3-axis。
第 38 行，修复 xScale
第 43 行，为yScale添加填充
第 47-49 行，修复 x,y,width 的值 rect
第 27 行，使用 d3.dsv

使用的 csv：

year   running_total
1949   5
1950   6
1951   7
1952   8

【讨论】：

谢谢你。我对为什么看不到矩形感到沮丧。
@user300 也许你可以打开 web 控制台看看是否有任何错误或警告？