我正在尝试使用焦点和上下文窗口创建一个多线图并实现刷牙，但是当我运行我的代码时，我收到以下错误：
错误：属性d：预期数字，＆＃34; MNaN，334.72093023 ......＆＃34;。 在我的代码中的第274行：
focus.selectAll（＆＃34; path.line＆＃34;）。attr（＆＃34; d＆＃34;，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
答案 0 :(得分：1)
<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="700" height="500"></svg>
<script type="text/javascript" src="d3.min.js"></script>
<script>
var data = [
{
"date": 201801,
"Paul Productive Code": 4.1,
"Paul Raw Code": 3.2,
"Michelle Productive Code": 2.2,
"Michelle Raw Code": 1.9,
"mario pro code": 20,
"mario raw code": 30
},
{
"date": 201802,
"Paul Productive Code": 4.2,
"Paul Raw Code": 3.5,
"Michelle Productive Code": 3.4,
"Michelle Raw Code": 1.9,
"mario pro code": 20,
"mario raw code": 30
},
{
"date": 201803,
"Paul Productive Code": 4.1,
"Paul Raw Code": 3.1,
"Michelle Productive Code": 3.1,
"Michelle Raw Code": 1.9,
"mario pro code": 20,
"mario raw code": 30
},
{
"date": 201804,
"Paul Productive Code": 4.5,
"Paul Raw Code": 3.8,
"Michelle Productive Code": 3.2,
"Michelle Raw Code": 2.3,
"mario pro code": 24,
"mario raw code": 20
},
{
"date": 201805,
"Paul Productive Code": 6.4,
"Paul Raw Code": 4.7,
"Michelle Productive Code": 3.7,
"Michelle Raw Code": 2.7,
"mario pro code": 25,
"mario raw code": 43
},
{
"date": 201806,
"Paul Productive Code": 8.6,
"Paul Raw Code": 5.5,
"Michelle Productive Code": 3.2,
"Michelle Raw Code": 2.2,
"mario pro code": 26,
"mario raw code": 20
}
];
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)
}
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() {
var extent = d3.event.selection;
var s = extent.map(x2.invert, x2);
x.domain(s);
focuslines.attr("d", function(d) {
return line(d.values)
});
focus.select(".axis--x").call(xAxis);
focus.select(".axis--y").call(yAxis);
}
</script>
</body>
</html>
您将x域设置为错误的内容。 brush.extent()不是你想要的。应为d3.event.selection，然后您必须从x比例缩小。
var s = d3.event.selection;
var invertedS = s.map(x.invert);
此外，您的线路选择与其外观略有不同。应该是：
focuslines.attr("d", function(d) {
return line(d.values)
});
focus.select(".axis--x").call(xAxis);
focus.select(".axis--y").call(yAxis);
.x.axis不是您之前创建的类。