猿问

如何在 d3 中使用 CSV 高度、重量、半径和颜色创建圆圈

我有包含高度、重量、半径和颜色的 CSV 数据。


我正在尝试使用这些数据制作圆圈，但什么也没得到（白色窗口）


这是代码：


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


<!DOCTYPE HTML>

<HTML>

<head>

    <meta charset="utf-8" />

    <title>companies</title>

    <style>

    svg {

        background-color: gray;

        height: 400px;

        width: 800px;

    }

</style>

</head>

<body>

<script>

           d3.csv("company.csv", function (the_data) {build_viz(the_data);});


        function build_viz(the_data) {

                    d3.select("svg")

                        .selectAll("circles")

                        .data(the_data)

                        .enter()

                        .append('circle')

                        .attr('cx', function (d) { return d.X; })

                        .attr('cy', function (d) { return d.Y; })

                        .attr('r', function (d) { return d.radius; })

                       .style("background-color", function (d) { return d.color; });

    }


    </script>

</body>

你知道这里缺少什么吗？谢谢你！


慕沐林林
浏览 114回答 2
2回答

POPMUISE

假设您的 company.csv 类似X、Y、半径100,20,10150,80,10<!DOCTYPE HTML><HTML><head>&nbsp; &nbsp; <meta charset="utf-8" />&nbsp; &nbsp; <title>companies</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .svg {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: gray;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 400px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 800px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; &nbsp; <script src="https://d3js.org/d3.v5.min.js"></script></head><body>&nbsp; &nbsp; <svg class='svg'></svg>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; d3.csv('./company.csv', function (the_data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("X", the_data.X)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("radius", the_data.radius)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; build_viz(the_data);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; function build_viz(the_data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d3.select('.svg')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .append("circle")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .attr("cx", the_data.X)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .attr("cy", the_data.Y)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .attr("r", the_data.radius)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .attr('fill', 'red')&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></body>输出：
0

Qyouu

svg页面主体中没有元素。结果，d3.select("svg")返回一个空选择，因此圆圈不会附加到任何内容。通过在脚本之前添加以下内容来修复<body>：<svg&nbsp;width="800px"&nbsp;height="400px"></svg>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答