Fatal编程技术网
  • date/
  • Date d3由系数着色的折线图

Date d3由系数着色的折线图

date d3.js svg path

Date d3由系数着色的折线图,date,d3.js,svg,path,linechart,Date,D3.js,Svg,Path,Linechart,我正试图根据迈克的工作制作一张折线图： 我觉得差不多完成了，但不知怎么的，网络上没有出现行。当我签入控制台时，我可以看到路径元素绑定到数据，如下所示： <path class="line" d="M-697.1963619399295,450L-697.1963619388773,387.66856476995656L-697.1963619378253,385.2700720945643L-697.1963619367732,376.45940344046255L-697.1963619

我正试图根据迈克的工作制作一张折线图：

我觉得差不多完成了，但不知怎么的，网络上没有出现行。当我签入控制台时，我可以看到路径元素绑定到数据，如下所示：

<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>
但我只需要年份信息。我只是假设在加载数据但不确定时可能会出现一些混乱

我的数据如下所示：

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>


var svg=d3。选择（“svg”），
边距={顶部：20，右侧：80，底部：30，左侧：50}，
宽度=svg.attr（“宽度”）-margin.left-margin.right，
高度=svg.attr（“高度”）-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]）；
变量zScale=d3.scaleOrdinal（d3.schemeCategory 10）；
var line=d3.line（）
.x（函数（d）{return xScale（d.date）；}）
.y（函数（d）{返回yScale（d.value）；}）；
d3.csv（“data.csv”），类型，功能（数据）{
var countries=data.columns.slice（1）.map（函数（id）{
返回{
id:id，
值：data.map（函数（d）{
返回{日期：d.time，
值：d[id]}；
})
};
});
域（d3.extent（数据，函数（d）{返回d.date；}））；
yScale.domain([
d3.min（国家，函数（c）{返回d3.min（c.values，函数（d）{返回d.values；}）；}），
max（国家，函数（c）{返回d3.max（c.values，函数（d）{返回d.value；}）；}）
]); 
zScale.domain（countries.map（函数（c）{return c.id；}））；
g、 附加（“g”）
.attr（“类”、“Xaxis”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（xScale））；
g、 附加（“g”）
.attr（“类”、“亚克斯”）
.call（d3.axisLeft（yScale））；
var country=g.selectAll（“.country”）
.数据（国家）
.enter（）.append（'g'）
.attr（“类别”、“国家”）；
country.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{返回行（d.values）；}）
.style（“笔划”，函数（d）{return zScale（d.id）；}）；
});
函数类型（d、389;、列）{
d、 日期=解析时间（d.time）；
对于（var i=1，n=columns.length，c；
i
您的CSV中有一列名为
时间
，而不是
日期

因此，您必须更改行函数

d.time = parseTime(d.time);
。。。以及标尺的范围：

xScale.domain(d3.extent(data, function(d) { 
    return d.time; 
}));
下面是一个演示，演示了这些更改，只使用了几行数据，让您看到它的工作情况：

如果设置笔划宽度，您看到了什么吗？您好@Andrew，谢谢您的回复。我根据你的建议尝试了笔划宽度，但线条仍然没有显示出来。你介意给我一些其他的建议吗？谢谢，Hi Sue，你能用一些示例数据创建一个plunk/blockbuilder吗？这样我们就可以更仔细地看一下？在Mike的例子中，类
.line
的样式有一个
笔划宽度：1.5px这在头部声明为css样式。您可能需要将其添加为样式，而不是d3
.attr
。当x值接近-700时，将从屏幕上画出线条。看起来您正在将xScale.domain设置为从1991年到去年的整数。但是当你画线的时候，你是在用这个比例尺来绘制自1970年以来以毫秒为单位的d.date？嗨，杰拉多，谢谢你的回答。渲染线条很有效！谢谢