линейная диаграмма d3, окрашенная фактором - PullRequest
Новая
       9

линейная диаграмма d3, окрашенная фактором

0 голосов
/ 03 июня 2018

Я пытаюсь составить линейный график, следующий за работой Майка: https://bl.ocks.org/mbostock/3884955

Я чувствую, что это почти сделано, но почему-то линии не появляются в сети.Когда я проверяю в консоли, я вижу, что элементы пути привязаны к данным, как показано ниже: 

<path class="line" d="M-697.1963619399295,450L-697.1963619388773,387.66856476995656L-697.1963619378253,385.2700720945643L-697.1963619367732,376.45940344046255L-697.1963619357211,365.5485611415587L-697.1963619346691,346.6313106168691L-697.196361933617,350.17558198677034L-697.196361932565,353.97503410091366L-697.1963619315128,312.6842695034037L-697.1963619304607,333.41027805240884L-697.1963619294087,321.8454859832573L-697.1963619283566,313.68973194787645L-697.1963619273046,241.5425737071716L-697.1963619262525,271.3271413254863L-697.1963619252003,280.314055452611L-697.1963619241483,209.81192123034214L-697.1963619230962,188.0957428765567L-697.1963619220442,185.33122960890398L-697.1963619209921,199.63550312298872L-697.19636191994,185.1121106885575L-697.196361918888,202.42299063181736L-697.1963619178358,217.14290559452036L-697.1963619167838,166.32145720825093L-697.1963619157317,137.91369117474824L-697.1963619146796,115.01923656419535L-697.1963619136276,117.12273665970253" style="stroke: rgb(31, 119, 180);"></path>

Я предполагаю, что путь не отображается, так как позиция x выглядит слишком низкой?Дата анализируется и отображается в консоли следующим образом: 

Tue Jan 01 1991 00:00:00 GMT+0000 (GMT Standard Time)

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

Мои данные выглядят так: 

time,EURO,OECD,USA,UK,
1991, 100,90,20,20,
1992, 20,40,50,30,
...

Может ли кто-нибудь мне помочь?

Заранее спасибо, 

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

<body>
<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 zScale = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
            .x(function(d) { return xScale(d.date); })
            .y(function(d) { return yScale(d.value); }); 

d3.csv("data.csv", type, function(data) {

    var countries = data.columns.slice(1).map(function(id) {
        return {
            id: id,
            values: data.map(function(d) { 
                return {date: d.time, 
                        value: d[id]};
                    })
        };
    });

    xScale.domain(d3.extent(data, function(d) { return d.date; }));

    yScale.domain([
        d3.min(countries, function(c) { return d3.min(c.values, function(d) { return d.value; }); }),
        d3.max(countries, function(c) { return d3.max(c.values, function(d) { return d.value; }); })
        ]); 

    zScale.domain(countries.map(function(c) { return c.id; })); 

    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));


    var country = g.selectAll(".country")
                    .data(countries)
                    .enter().append('g')
                    .attr("class", "country");

    country.append("path")
            .attr("class", "line")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return zScale(d.id); }); 

});

function type(d, _, columns) {

    d.date = parseTime(d.time);

    for (var i = 1, n = columns.length, c; 
        i < n; ++i)
        d[c = columns[i]] = +d[c];


    return d; 
}

</script>
</body>

1 Ответ

0 голосов
/ 04 июня 2018

Ваш CSV имеет столбец с именем time, а не date.

Следовательно, вам нужно изменить функцию строки ... 

d.time = parseTime(d.time);

... иДомен масштаба: 

xScale.domain(d3.extent(data, function(d) { 
    return d.time; 
}));

Вот демонстрация с этими изменениями, использующая всего пару строк данных, чтобы вы увидели, как она работает: https://plnkr.co/edit/phQr3Ekd6ztZAGt9SE4v?p=preview

...