Fatal编程技术网
  • javascript/
  • Javascript D3：对象内部具有空值的非连续折线图

Javascript D3：对象内部具有空值的非连续折线图

javascript object d3.js

Javascript D3：对象内部具有空值的非连续折线图,javascript,object,d3.js,linegraph,Javascript,Object,D3.js,Linegraph,我试着做一个类似D3的创造者自己提供的折线图 为了处理空值，他使用了如下定义的（）函数： var line = d3.line() .defined(function(d) { return d; }) .x(function(d) { return x(d.x); }) .y(function(d) { return y(d.y); }); data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null] data = [{"date":198

我试着做一个类似D3的创造者自己提供的折线图

为了处理空值，他使用了如下定义的（）函数：

var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });

data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null]

data = [{"date":1980,"value":80},,{"date":1985,"value":82},{"date":1990,"valye":74},{"date":1995,"value":83},{"date":2000,"value":83},{"date":2005,"value":81},{"date":2010,"value":null},{"date":2015,"value":null}]
然后，如果找到一个空值而不是一个对象，它将被忽略，并且图表中会有一个如下所示的洞：

var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });

data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null]

data = [{"date":1980,"value":80},,{"date":1985,"value":82},{"date":1990,"valye":74},{"date":1995,"value":83},{"date":2000,"value":83},{"date":2005,"value":81},{"date":2010,"value":null},{"date":2015,"value":null}]

在本例中，数据的格式如下：

var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });

data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null]

data = [{"date":1980,"value":80},,{"date":1985,"value":82},{"date":1990,"valye":74},{"date":1995,"value":83},{"date":2000,"value":83},{"date":2005,"value":81},{"date":2010,"value":null},{"date":2015,"value":null}]
但我正在研究一个更复杂的cas，因为这是一个像这样的时间序列：

var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });

data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null]

data = [{"date":1980,"value":80},,{"date":1985,"value":82},{"date":1990,"valye":74},{"date":1995,"value":83},{"date":2000,"value":83},{"date":2005,"value":81},{"date":2010,"value":null},{"date":2015,"value":null}]
正如您所看到的，空值位于多个对象中。因此，前面描述的defined（）函数无法正常工作，我的曲线图如下所示：

最后一个值在数据集中被视为0，而不是“空白”。所以我的问题是：我可以像Mike Bostock的例子那样修改定义的函数来忽略空值吗

以下是我的折线图的全部代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  stroke-width: 2px;
  fill:none;
}

.line:hover{
  stroke:#c2c2c2;
}


</style>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var margin = {top: 20, right: 165, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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


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


data = [{"date":1980,"value":80},{"date":1981,"value":80},{"date":1982,"value":81},{"date":1983,"value":81},{"date":1984,"value":96},{"date":1985,"value":82},{"date":1986,"value":84},{"date":1987,"value":76},{"date":1988,"value":75},{"date":1989,"value":75},{"date":1990,"value":74},{"date":1991,"value":78},{"date":1992,"value":77},{"date":1993,"value":79},{"date":1994,"value":81},{"date":1995,"value":83},{"date":1996,"value":82},{"date":1997,"value":82},{"date":1998,"value":81},{"date":1999,"value":83},{"date":2000,"value":83},{"date":2001,"value":84},{"date":2002,"value":85},{"date":2003,"value":84},{"date":2004,"value":85},{"date":2005,"value":81},{"date":2006,"value":83},{"date":2007,"value":78},{"date":2008,"value":null},{"date":2009,"value":null},{"date":2010,"value":null},{"date":2011,"value":null},{"date":2012,"value":null},{"date":2013,"value":null},{"date":2014,"value":null},{"date":2015,"value":null}]



var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");


  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, 100]);


  svg.append("path")
      .data([data])
      .attr("class", "line")
      .style("stroke", "#0F185B")
      .attr("d", line);


  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .selectAll("text")  
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("font-size", "0.9em")
        .attr("width","40px")
        .attr("transform", "rotate(-65)")
        .text(function(d) {return +d; });


  svg.append("g")
      .call(d3.axisLeft(y));




</script>
</body>


/*设置CSS*/
.线路{
笔画宽度：2px；
填充：无；
}
.行：悬停{
冲程：#C2C2；
}
var margin={顶部：20，右侧：165，底部：30，左侧：50}，
宽度=600-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var line=d3.line（）
.defined（函数（d）{返回d；}）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.value）；}）；
数据=[{“日期”：1980，“价值”：80}，{“日期”：1981，“价值”：80}，{“日期”：1982，“价值”：81}，{“日期”：1983，“价值”：81}，{“日期”：1984，“价值”：96}，{“日期”：1985，“价值”：82}，{“日期”：1986，“价值”：84}，{“日期”：1987，“价值”：76}，{“日期”：1988，“价值”：75}，{“日期”：1989，“价值”：75}，{“日期”：1990，“价值”：74}，{“日期”：1991，“价值”：78}，{“日期”：1992，{“价值”：77}，“价值”：79}，{“日期”：1994，“价值”：81}，{“日期”：1995，“价值”：83}，{“日期”：1996，“价值”：82}，{“日期”：1997，“价值”：82}，{“日期”：1998，“价值”：81}，{“日期”：1999，“价值”：83}，{“日期”：2000，“价值”：83}，{“日期”：2001，“价值”：84}，{“日期”：2002，“价值”：85}，{“日期”：2003，“价值”：84}，{“日期”：2004，“价值”：85，{“日期”：2005，“价值”：81}，{“日期”：2006，{：2007，“值”：78}，{“日期”：2008，“值”：null}，{“日期”：2009，“值”：null}，{“日期”：2010，“值”：null}，{“日期”：2011，“值”：null}，{“日期”：2012，“值”：null}，{“日期”：2013，“值”：null}，{“日期”：2014，“值”：null}，{“日期”：2015，“值”：null}]
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[01100]）；
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.style（“笔划”，“#0F185B”）
.attr（“d”，行）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“.15em”）
.attr（“字体大小”，“0.9em”）
.attr（“宽度”，“40px”）
.attr（“变换”、“旋转（-65）”）
.text（函数（d）{return+d；}）；
svg.append（“g”）
.调用（d3.左（y））；
提前谢谢

对定义的
方法使用
d.value
：


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


以下是您的更新代码：



var保证金={
前20名，
右：165，
底数：30，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var line=d3.line（）
.已定义（功能（d）{
返回d值；
})
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d值）；
});
数据=[{
“日期”：1980年，
“价值”：80
}, {
“日期”：1981年，
“价值”：80
}, {
“日期”：1982年，
“价值”：81
}, {
“日期”：1983年，
“价值”：81
}, {
“日期”：1984年，
“价值”：96
}, {
“日期”：1985年，
“价值”：82
}, {
“日期”：1986年，
“价值”：84
}, {
“日期”：1987年，
“价值”：76
}, {
“日期”：1988年，
“价值”：75
}, {
“日期”：1989年，
“价值”：75
}, {
“日期”：1990年，
“价值”：74
}, {
“日期”：1991年，
“价值”：78
}, {
“日期”：1992年，
“价值”：77
}, {
“日期”：1993年，
“价值”：79
}, {
“日期”：1994年，
“价值”：81
}, {
“日期”：1995年，
“价值”：83
}, {
“日期”：1996年，
“价值”：82
}, {
“日期”：1997年，
“价值”：82
}, {
“日期”：1998年，
“价值”：81
}, {
“日期”：1999年，
“价值”：83
}, {
“日期”：2000年，
“价值”：83
}, {
“日期”：2001年，
“价值”：84
}, {
“日期”：2002年，
“价值”：85
}, {
“日期”：2003年，
“价值”：84
}, {
“日期”：2004年，
“价值”：85
}, {
“日期”：2005年，
“价值”：81
}, {
“日期”：2006年，
“价值”：83
}, {
“日期”：2007年，
“价值”：78
}, {
“日期”：2008年，
“值”：空
}, {
“日期”：2009年，
“值”：空
}, {
“日期”：2010年，
“值”：空
}, {
“日期”：2011年，
“值”：空
}, {
“日期”：2012年，
“值”：空
}, {
“日期”：2013年，
“值”：空
}, {
“日期”：2014年，
“值”：空
}, {
“日期”：2015年，
“值”：空
}]
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（[01100]）；
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.style（“笔划”，“#0F185B”）
.attr（“d”，行）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“.15em”）
.attr（“字体大小”，“0.9em”）
.attr（“宽度”，“40px”）
.attr（“变换”、“旋转（-65）”）
.文本（功能（d）{
返回+d；
});
svg.append（“g”）
.调用（d3.左（y））

路径{
填充：无；
笔画：蓝色；
}