Как создать круги с использованием CSV высоты, веса, радиуса и цветов в d3 - PullRequest
Новая
       6

Как создать круги с использованием CSV высоты, веса, радиуса и цветов в d3

0 голосов
/ 12 апреля 2020

У меня есть данные 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>

Знаете, чего здесь не хватает? Спасибо!

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Допустим, ваша компания.csv похожа на

X, Y, радиус

100,20,10

150,80,10 

<!DOCTYPE HTML>
<HTML>

<head>
    <meta charset="utf-8" />
    <title>companies</title>
    <style>
        .svg {
            background-color: gray;
            height: 400px;
            width: 800px;
        }
    </style>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
    <svg class='svg'></svg>
    <script>


        d3.csv('./company.csv', function (the_data) {
            console.log("X", the_data.X)
            console.log("radius", the_data.radius)
            build_viz(the_data);
        });

        function build_viz(the_data) {

            d3.select('.svg')
                .append("circle")
                .attr("cx", the_data.X)
                .attr("cy", the_data.Y)
                .attr("r", the_data.radius)
                .attr('fill', 'red')
        }

    </script>
</body>

Вывод: enter image description here

0 голосов
/ 12 апреля 2020

В теле страницы нет элемента svg.

Как следствие, d3.select("svg") возвращает пустой выбор, поэтому круги ни к чему не добавляются.

Исправить с помощью добавив следующее в <body>, перед сценарием: 

<svg width="800px" height="400px"></svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...