Question

我正在努力制作一张关于迈克工作的折线图：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>

Answer 1

您的CSV有一个名为String val = JOptionPane.showInputDialog("Value: "); if(val == null){ // nothing goes here if yo don't want any action when canceled, or // redirect it to a cancel page if needed }else{ //insert your code if ok pressed // JOptionPane return an String, as you was talking about int int value = Integer.ParseInt(val); }的列，而不是time。

因此，您必须更改行功能...

date

......以及比例范围：

d.time = parseTime(d.time);

这是一个包含这些更改的演示，仅使用几行数据，让您看到它有效：https://plnkr.co/edit/phQr3Ekd6ztZAGt9SE4v?p=preview

d3折线图由

1 个答案: