строка для начального значения в выпадающем списке исчезает при выделении другого в d3 - PullRequest
Новая
       7

строка для начального значения в выпадающем списке исчезает при выделении другого в d3

0 голосов
/ 26 сентября 2018

Я делаю простой график по стране.Я определил, что все строки серые, но когда выбрана страна в выпадающем списке, соответствующая строка становится красной.

Начальная визуализация визуализируется, и функция подсветки также работает.Но проблема, с которой я столкнулся, заключается в том, что первоначальная серая линия для страны по умолчанию (евро, как ее первое значение в стране) исчезает, когда вы выбираете страну из выпадающего меню.Я понятия не имею, почему это происходит.

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

Для простоты данные выглядят так: 

country, value, year
EUR, 100, 2000
USA, 30
NOR, 40
SWE, 20
EUR, 300, 2001
USA, 100, 2001
NOR, 10, 2001
SWE, 400, 2001
EUR, 30, 2002
USA, 200, 2002
NOR, 100, 2002
SWE, 30, 2002

И мой код здесь.

<!DOCTYPE html>
<meta charset = "utf-8">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

<div id = "countryDropdown">Select Country: </div>

<svg width="960" height="500"></svg>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y");

var xScale = d3.scaleTime().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]);

var line = d3.line()
            .x(function(d) { return xScale(d.year); })
            .y(function(d) { return yScale(d.value); }); 
d3.csv("data.csv", type, function(data) {

    xScale.domain(d3.extent(data, function(d) { return d.year; }));
    yScale.domain([0, d3.max(data, function(d) { return d.value; })]); 

    var nest = d3.nest()
                .key(function(d) { return d.country; }) 
                .entries(data);  

    g.append("g")
        .attr("class", "Xaxis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xScale));

    g.append("g")
        .attr("class", "Yaxis")
        .call(d3.axisLeft(yScale));

// Dropdown menu

    var countryMenu = d3.select("#countryDropdown") 

    countryMenu
        .append("select")
        .selectAll("option")
        .data(nest)
        .enter()
        .append("option")
        .attr("value", function(d) { return d.key; })
        .text(function(d) { return d.key; })  

// Initial line

    g.selectAll(".line")
        .data(nest)
        .enter()
        .append("path")
            .attr("class", "line")
            .attr("d", function(d) { return line1(d.values); })
                .style("stroke",  "#D3D3D3")
                .style("stroke-width", 1)
                .style("fill", "none")

//highlight function
    var highlight= function(country) { 

        var selectData = nest.filter(function(d) { 
            return d.key == country; })

        g.selectAll(".line")
            .data(selectData) 
                .transition() 
                .duration(1000)
            .attr("d", function(d) { return line(d.values)})
                .style("stroke",  "#ff0000")
                .style("stroke-width", 4)
                .style("fill", "none") 

            }


    countryMenu.on("change", function() {
        var selectedValue = d3.select(this)
                                .select("select")
                                .property("value")
        highlight(selectedValue)

    });


});

function type(d) { 
    d.year= parseTime(d.year),
    d.value= + d.value; 

    return d
};

Понятия не имею, что происходит в начальной строке!Кто-нибудь может мне помочь?

Большое спасибо.

...