Как нарисовать круги для двух разных столбцов в d3 v5? - PullRequest
Новая
       23

Как нарисовать круги для двух разных столбцов в d3 v5?

1 голос
/ 19 апреля 2020

Я хочу создать диаграмму рассеяния моих данных, которая состоит из трех столбцов Года, Мужчины и Женщины. Я хочу нарисовать круги для столбцов Мужчины и Женщины, которые соответствуют году. Вот код, который я написал, но в SVG добавлен только первый набор кружков. Я использую d3 v5. 

svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")
                .attr("cx", d => xScale(d.Year))
                .attr("cy", d => yScale(d.Men))
                .attr("r", d => aScale(d.Men))
                .attr("id", "men")
                .attr("fill", function(d) {
                    return "rgb(0, 0, " + Math.round((d.Men) * 20) + ")"
                });

                svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")
                .attr("cx", d => xScale(d.Year))
                .attr("cy", d => yScale(d.Women))
                .attr("r", d => aScale(d.Women))
                .attr("id", "women")
                .attr("fill", "green");

1 Ответ

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

Вы используете неправильный метод enter (). Ввод оценивает данные ведьмы, используя селектор раньше. В вашем случае селектор круг. Как вы снова используете тот же селектор, данные и ввод для второго случая, ввод не обнаруживает новых изменений. Вы должны сохранить ввод в переменной и использовать его для: 

const circleEnter = svg.selectAll("circle")
            .data(dataset)
            .enter();

circleEnter.append("circle")
            .attr("cx", d => xScale(d.Year))
            .attr("cy", d => yScale(d.Men))
            .attr("r", d => aScale(d.Men))
            .attr("id", "men")
            .attr("fill", function(d) {
                return "rgb(0, 0, " + Math.round((d.Men) * 20) + ")"
            });

circleEnter.append("circle")
            .attr("cx", d => xScale(d.Year))
            .attr("cy", d => yScale(d.Women))
            .attr("r", d => aScale(d.Women))
            .attr("id", "women")
            .attr("fill", "green");

Удачи!

...