d3 SVG 组件未在 Chrome 中显示答案

【问题标题】：d3 SVG components not showing up in Chromed3 SVG 组件未在 Chrome 中显示
【发布时间】：2018-12-07 15:00:14
【问题描述】：

我尝试 D3 是为了好玩，但由于某种原因，我无法让我的 svg 组件在浏览器中呈现。检查控制台，我可以看到创建了 svg 容器，但没有创建任何元素。

我正在从 .json 文件加载。如果我将数据打印到控制台，我可以看到 .json 文件中包含的所有内容，因此它正在获取正确的数据。

我的 HTML 非常基础：

<!DOCTYPE html>
<html>
<head>
    <title>D3 Test</title>
    <script type="text/javascript" src="d3-min.js"></script>            
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="tree"></div>
    <script>
        importJsonData();
    </script>
</body>
</html>

这是我的 JS：

function importJsonData() {
    d3.json("./test/test_data.json", function(data) {
        console.log(data);
        let canvas = d3.select("#tree").append("svg")
            .attr("width", 1000)
            .attr("height", 700)

        canvas.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("width", 50)
        .attr("height", 50)
        .attr("y", function (d, i)
        {
            return i * 50
        })
        .attr("fill", "green");
    });
}

我可能对 selectAll 有错误的理解 - 我认为它会 selectAll 匹配过滤器的元素，但如果您使用 enter() 将数据归因于此，它将为每个元素创建一个组件。

感谢任何帮助。

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

您有一个语法错误需要先修复，根本没有附加 SVG

.attr("width", "50)

应该是

.attr("width", 50)

var data = [{id:1}, {id:2}, {id:3}];
drawData(data);

function drawData(data) {
    console.log(data);
    let canvas = d3.select("#tree").append("svg")
        .attr("width", 1000)
        .attr("height", 700)

    canvas.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width", 50)
    .attr("height", 50)
    .attr("y", function (d, i) { return i * 50; })
    .attr("fill", "green");
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="tree"></div>

【讨论】：

谢谢，但我希望从正在读取的文件中获取数据，而不是硬编码数组。
@Darnold14 为了您的问题，数据来自哪里并不重要。 rioV8 刚刚努力将其放入minimal reproducible example 中，以显示它正在运行。这个答案的精髓在于它的前 4 行：去掉引号，你就完成了。
@altocumulus：我很好奇他的所有其他要求以及作业的截止日期。