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

Sue спросил: 10 мая 2018 в 04:28 в: date

Я пытаюсь сделать линейную диаграмму после работы Майка: 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 ответ

Есть решение
Gerardo Furtado ответил: 10 мая 2018 в 10:08

В вашем 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

Sue ответил: 11 мая 2018 в 04:51
Привет @ Герадо, спасибо за ваш ответ. Он работал, чтобы сделать линии! Благодаря,

Дополнительное видео по вопросу: Линейная диаграмма d3, окрашенная множителем

Making a Bar Chart with D3.js and SVG [Reloaded]

D3.js tutorial - 3 - Basic SVG shapes