【发布时间】：2018-03-07 07:43:51
【问题描述】：
我正在尝试制作带有焦点和上下文窗口的多折线图并实现刷亮，但是当我运行我的代码时出现以下错误：
错误：属性 d：预期数字，“MNaN,334.72093023...”。 在我的代码的第 274 行：
focus.selectAll("path.line").attr("d", function(d) {return line(d.values)});)
这不允许我在焦点图中绘制线条，只能在上下文图中绘制。
感谢任何帮助。
图表图片：https://imgur.com/a/GJiF6
代码如下
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<style>
.axis--x path {
display: none;
}
.axis--y path {
display: none;
}
.line {
fill: none;
stroke-width: 1.5px;
}
.grid line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
</style>
</head>
<body>
<svg width="1080" height="500"></svg>
<script type="text/javascript" src="d3.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 160, bottom: 110, left: 60},
margin2 = {top: 430, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
height2 = +svg.attr("height") - margin2.top - margin2.bottom;
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#f5f5f1")
var parseTime = d3.timeParse("%Y%m");
var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
y2 = d3.scaleLinear().range([height2, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var xAxis = d3.axisBottom(x),
xAxis2 = d3.axisBottom(x2),
yAxis = d3.axisLeft(y);
var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
var line = d3.line()
.x(function (d) { return x(new Date(d.date)); })
.y(function (d) { return y(d.hours); });
var line2 = d3.line()
.x(function (d) { return x2(new Date(d.date)); })
.y(function (d) { return y2(d.hours); })
var clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr("x", 0)
.attr("y", 0);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var colors = [];
for(var i = 0; i < 50; i++)
{
var xx = getRandomColor();
colors.push(xx);
colors.push(xx);
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y)
.ticks(5)
}
d3.csv("data.csv", function(error, data) {
if (error) throw error;
z.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseTime(d.date);
});
var employees = z.domain().map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, hours: +d[id]};
})
};
});
var o1 = 0;
var o2 = 0;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
0,
d3.max(employees, function(c) { return d3.max(c.values, function(d) { return d.hours; }); })
]);
x2.domain(x.domain());
y2.domain(y.domain());
z.domain(employees.map(function(c) { return c.id; }));
var focuslineGroups = focus.selectAll("g")
.data(employees)
.enter().append("g");
var focuslines = focuslineGroups.append("path")
.attr("class","line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) {return colors[o1++]})
.attr("clip-path", "url(#clip)");
focus.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
)
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
var contextlineGroups = context.selectAll("g")
.data(employees)
.enter().append("g");
var contextLines = contextlineGroups.append("path")
.attr("class", "line")
.attr("d", function(d) { return line2(d.values); })
.style("stroke", function(d) {return colors[o2++]})
.attr("clip-path", "url(#clip)");
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
});
function brushed() {
x.domain(brush.extent());
focus.selectAll("path.line").attr("d", function(d) {return line(d.values)});
focus.select(".x.axis").call(xAxis);
focus.select(".y.axis").call(yAxis);
}
</script>
</body>
</html>
data.csv 文件：
date,Paul Productive Code,Paul Raw Code,Michelle Productive Code,Michelle Raw Code,mario pro code,mario raw code
201801,4.1,3.2,2.2,1.9,20,30
201802,4.2,3.5,3.4,1.9,20,30
201803,4.1,3.1,3.1,1.9,20,30
201804,4.5,3.8,3.2,2.3,24,20
201805,6.4,4.7,3.7,2.7,25,43
201806,8.6,5.5,3.2,2.2,26,20
【问题讨论】：
标签： javascript d3.js graph