小贝子编程

十字准线组件抛出错误，特定于数据集?



我制作了多个具有十字准线组件的图形。我通常以这个块为模型。除非您非常熟悉它的复杂性，否则修补它并不容易。这是一个简化版本，只是为了说明我的困境。唯一复杂的是我使用的是linear秤，而不是传统的time比例尺。您可以在以下位置了解更多信息：线性比例的十字准线/x 值工具提示。

事不宜迟，这是我包含硬编码数据的片段。无论出于何种原因，这个数据集总是不能与我的十字准线组件一起使用(无论是那个还是我的用户错误同样系统(。

var margins = {left:50, right:0, top:30, bottom:40};
var padding = 80;
var graphOne = {width:500, height:500};
var svg = d3.select('body').append('svg')
.attr('width', graphOne.width+margins.left+margins.right+padding)
.attr('height', graphOne.height);
var rawData =    [
{'fpr': '1', 'tpr': '1'},
{'fpr': '0.97', 'tpr': '1'},
{'fpr': '0.94', 'tpr': '1'},
{'fpr': '0.85', 'tpr': '1'},
{'fpr': '0.79', 'tpr': '1'},
{'fpr': '0.76', 'tpr': '1'},
{'fpr': '0.61', 'tpr': '1'},
{'fpr': '0.5', 'tpr': '1'},
{'fpr': '0.3824', 'tpr': '1'},
{'fpr': '0.3529', 'tpr': '1'},
{'fpr': '0.3529', 'tpr': '1'},
{'fpr': '0.2941', 'tpr': '1'},
{'fpr': '0.2941', 'tpr': '1'},
{'fpr': '0.2941', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2353', 'tpr': '1'},
{'fpr': '0.2353', 'tpr': '1'},
{'fpr': '0.2059', 'tpr': '1'},
{'fpr': '0.2059', 'tpr': '1'},
{'fpr': '0.1765', 'tpr': '1'},
{'fpr': '0.1471', 'tpr': '1'},
{'fpr': '0.1471', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0588', 'tpr': '0.9655'},
{'fpr': '0.0588', 'tpr': '0.9655'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.7931'},
{'fpr': '0.0294', 'tpr': '0.7931'},
{'fpr': '0.0294', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7586'},
{'fpr': '0', 'tpr': '0.5862'},
{'fpr': '0', 'tpr': '0.5517'},
{'fpr': '0', 'tpr': '0.4828'},
{'fpr': '0', 'tpr': '0.3448'},
{'fpr': '0', 'tpr': '0.3103'},
{'fpr': '0', 'tpr': '0.1379'},
{'fpr': '0', 'tpr': '0.1034'},
{'fpr': '0', 'tpr': '0.07'},
{'fpr': '0', 'tpr': '0'}
];
var data = rawData.map(function(d) {
return { X: +d.fpr, Y: +d.tpr,}
});
var xScaleOne = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.X; }))
.range([0, graphOne.width]);
var yScaleOne = d3.scale.linear()
.domain(d3.extent(data, function(d) {return d.Y; }))
.range([graphOne.height-margins.bottom-margins.top, 0]);
var xAxisOne = d3.svg.axis().scale(xScaleOne).orient('bottom');
var yAxisOne = d3.svg.axis().scale(yScaleOne).orient('left');
var xAxisOneNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + (graphOne.height - margins.bottom) + ')')
.attr('class', 'x axis')
.call(xAxisOne);
var yAxisOneNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + (margins.top) + ')')
.attr('class', 'y axis')
.call(yAxisOne);
var graphOneGroup = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')');
var lineOne = d3.svg.line()
.x(function(d) { return xScaleOne(d.X); })
.y(function(d) { return yScaleOne(d.Y); });
var diagonal = graphOneGroup.append('line')
.attr({x1:xScaleOne(0), x2:xScaleOne(1), y1:yScaleOne(0), y2:yScaleOne(1)})
.attr('stroke', 'black')
.attr('stroke-dasharray', '4,4')
.attr('stroke-width',3);
graphOneGroup.append('path')
.datum(data)
.attr('d',lineOne)
.attr('fill','none')
.attr('stroke', '#000')
.attr('stroke-width', '3px');
//focus start
var focus = graphOneGroup.append('g').style('display', 'none');
var xDomain = d3.extent(data, function(d) {return d[0]; });
var yDomain = d3.extent(data, function(d) {return d[1]; });
focus.append("line")
.attr("id", "verticalFocus")
.style("stroke", "gray")
.style("stroke-width", "3px")
.style("stroke-dasharray", "5,5")
.style("opacity", 1)
.attr("y1", 0)
.attr("y2", graphOne.height-margins.top-margins.bottom);
focus.append("line")
.attr("id", "horizontalFocus")
.style("stroke", "gray")
.style("stroke-width", "3px")
.style("stroke-dasharray", "5,5")
.style("opacity", 1)
.attr("x1", graphOne.width)
.attr("x2",  graphOne.width);
focus.append("circle")
.attr("id", "circleFocus")
.style("fill", "#376c9b")
.style("stroke", "white")
.style("stroke-width", "3px")
.attr("r", 5);
var bisect = d3.bisector(function(d) { return +d[0]; }).left;
graphOneGroup.append("rect")
.attr("width", graphOne.width)
.attr("height",graphOne.height-margins.top-margins.bottom)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var mouse = d3.mouse(this);
var mouseValue = xScaleOne.invert(mouse[0]);
var i = bisect(data, mouseValue);
var d0 = data[i-1];
var d1 = data[i];
console.log(d0)
console.log(d1)
var d = mouseValue - d0[0] > d1[0] - mouseDate ? d1 : d0;
var x = xScaleOne(d[0]);
var y = yScaleOne(d[1]);
focus.select('#horizontalFocus')
.attr('x1', x).attr('y1', yScaleOne(yDomain[0]))
.attr('x2', x).attr('y2', yScaleOne(yDomain[1]));
focus.select('#verticalFocus')
.attr('x1', xScaleOne(xDomain[0])).attr('y1', y)
.attr('x2', xScaleOne(xDomain[1])).attr('y2', y);
focus.select('#circleFocus')
.attr('cx',x)
.attr('cy',y);
}
g.x.axis, g.y.axis {
font-size: 10px;
font-family: Play;
}
.tick line {
fill:none;
stroke:#000;
stroke-width:1px;
}
.domain {
fill:none;
stroke:#000;
stroke-width:.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>

我试图使用注释来指示焦点/十字准线部分。您还会在控制台日志中注意到一些奇怪的结果。d0被解读为未定义。这似乎在每次鼠标移动时都会抛弃计算。我很确定我的事件侦听器矩形位置正确;因为未定义的值可能会出现在边距中，如类似的十字准线问题中所述：无法读取未定义的属性"0"。这个故事的另一个寓意是不要在平分函数return后制作一条新线，这是我注意到的。

问：为什么我的d0未定义？我的十字准线组件几乎与我发布的示例块相同，但使用linear比例的微小例外。我小心翼翼地调整了代码的必要部分来解释这一点。我之前用这个系统使用过线性刻度;我的预感是，这个数据集在代码中引入了一个错误，或者有一些我的代码不健壮的其他属性——不管那是什么，我都找不到罪魁祸首。

回答您的问题：为什么d0未定义？是bisect函数的错误用法。

以下是d3.bisect的文档： https://github.com/d3/d3-array#bisect

如果您查看使用情况并将其用于数据，它将是这样的：var bisect = d3.bisector(function(d) { return +d.X; }).left;

一个主要的事情(甚至在文档中提到(是这个d3.bisect假设数组是一个排序的数组，而在您的情况下并非如此。当我控制台记录数据时，我发现它的顺序相反，因此只需使用data.reverse()将其传递给d3 bisector。

其余的是一些小的更改，我认为您可能是从您引用的示例块中复制的。

例如：在行中，.attr('x1', x).attr('y1', yScaleOne(yDomain[0]))，您的案例中缺少yDomain。接下来几行中使用的xDomain也是如此。

添加上述内容并修复错误，这里有一个相同的片段：

var margins = {left:50, right:0, top:30, bottom:40};
var padding = 80;
var graphOne = {width:500, height:500};
var svg = d3.select('body').append('svg')
.attr('width', graphOne.width+margins.left+margins.right+padding)
.attr('height', graphOne.height);
var rawData =    [
{'fpr': '1', 'tpr': '1'},
{'fpr': '0.97', 'tpr': '1'},
{'fpr': '0.94', 'tpr': '1'},
{'fpr': '0.85', 'tpr': '1'},
{'fpr': '0.79', 'tpr': '1'},
{'fpr': '0.76', 'tpr': '1'},
{'fpr': '0.61', 'tpr': '1'},
{'fpr': '0.5', 'tpr': '1'},
{'fpr': '0.3824', 'tpr': '1'},
{'fpr': '0.3529', 'tpr': '1'},
{'fpr': '0.3529', 'tpr': '1'},
{'fpr': '0.2941', 'tpr': '1'},
{'fpr': '0.2941', 'tpr': '1'},
{'fpr': '0.2941', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2647', 'tpr': '1'},
{'fpr': '0.2353', 'tpr': '1'},
{'fpr': '0.2353', 'tpr': '1'},
{'fpr': '0.2059', 'tpr': '1'},
{'fpr': '0.2059', 'tpr': '1'},
{'fpr': '0.1765', 'tpr': '1'},
{'fpr': '0.1471', 'tpr': '1'},
{'fpr': '0.1471', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0882', 'tpr': '0.9655'},
{'fpr': '0.0588', 'tpr': '0.9655'},
{'fpr': '0.0588', 'tpr': '0.9655'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.931'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0588', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8966'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8621'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.8276'},
{'fpr': '0.0294', 'tpr': '0.7931'},
{'fpr': '0.0294', 'tpr': '0.7931'},
{'fpr': '0.0294', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7931'},
{'fpr': '0', 'tpr': '0.7586'},
{'fpr': '0', 'tpr': '0.5862'},
{'fpr': '0', 'tpr': '0.5517'},
{'fpr': '0', 'tpr': '0.4828'},
{'fpr': '0', 'tpr': '0.3448'},
{'fpr': '0', 'tpr': '0.3103'},
{'fpr': '0', 'tpr': '0.1379'},
{'fpr': '0', 'tpr': '0.1034'},
{'fpr': '0', 'tpr': '0.07'},
{'fpr': '0', 'tpr': '0'}
];
var data = rawData.map(function(d) {
return { X: +d.fpr, Y: +d.tpr,}
});
	data = data.reverse(); // sorted the data
var xScaleOne = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.X; }))
.range([0, graphOne.width]);
var yScaleOne = d3.scale.linear()
.domain(d3.extent(data, function(d) {return d.Y; }))
.range([graphOne.height-margins.bottom-margins.top, 0]);
var xAxisOne = d3.svg.axis().scale(xScaleOne).orient('bottom');
var yAxisOne = d3.svg.axis().scale(yScaleOne).orient('left');
var xAxisOneNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + (graphOne.height - margins.bottom) + ')')
.attr('class', 'x axis')
.call(xAxisOne);
var yAxisOneNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + (margins.top) + ')')
.attr('class', 'y axis')
.call(yAxisOne);
var graphOneGroup = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')');
var lineOne = d3.svg.line()
.x(function(d) { return xScaleOne(d.X); })
.y(function(d) { return yScaleOne(d.Y); });
var diagonal = graphOneGroup.append('line')
.attr({x1:xScaleOne(0), x2:xScaleOne(1), y1:yScaleOne(0), y2:yScaleOne(1)})
.attr('stroke', 'black')
.attr('stroke-dasharray', '4,4')
.attr('stroke-width',3);
graphOneGroup.append('path')
.datum(data)
.attr('d',lineOne)
.attr('fill','none')
.attr('stroke', '#000')
.attr('stroke-width', '3px');
//focus start
var focus = graphOneGroup.append('g').style('display', 'none');
var xDomain = d3.extent(data, function(d) {return d[0]; });
var yDomain = d3.extent(data, function(d) {return d[1]; });
focus.append("line")
.attr("id", "verticalFocus")
.style("stroke", "gray")
.style("stroke-width", "3px")
.style("stroke-dasharray", "5,5")
.style("opacity", 1)
.attr("y1", 0)
.attr("y2", graphOne.height-margins.top-margins.bottom);
focus.append("line")
.attr("id", "horizontalFocus")
.style("stroke", "gray")
.style("stroke-width", "3px")
.style("stroke-dasharray", "5,5")
.style("opacity", 1)
.attr("x1", graphOne.width)
.attr("x2",  graphOne.width);
focus.append("circle")
.attr("id", "circleFocus")
.style("fill", "#376c9b")
.style("stroke", "white")
.style("stroke-width", "3px")
.attr("r", 5);
var bisect = d3.bisector(function(d) { return +d.X; }).left;
graphOneGroup.append("rect")
.attr("width", graphOne.width)
.attr("height",graphOne.height-margins.top-margins.bottom)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var mouse = d3.mouse(this);
var mouseValue = xScaleOne.invert(mouse[0]);
var i = bisect(data, mouseValue);
var d0 = data[i-1];
var d1 = data[i];
// console.log(d0)
// console.log(d1)
var d = mouseValue - d0.X > d1.X - mouseValue ? d1 : d0;
var x = xScaleOne(d.X);
var y = yScaleOne(d.Y);
focus.select('#horizontalFocus')
.attr('x1', x).attr('y1', yScaleOne(yScaleOne.domain()[0]))
.attr('x2', x).attr('y2', yScaleOne(yScaleOne.domain()[1]));
focus.select('#verticalFocus')
.attr('x1', xScaleOne(xScaleOne.domain()[0])).attr('y1', y)
.attr('x2', xScaleOne(xScaleOne.domain()[1])).attr('y2', y);
focus.select('#circleFocus')
.attr('cx',x)
.attr('cy',y);
}
g.x.axis, g.y.axis {
font-size: 10px;
font-family: Play;
}
.tick line {
fill:none;
stroke:#000;
stroke-width:1px;
}
.domain {
fill:none;
stroke:#000;
stroke-width:.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>

相关变更：

data = data.reverse(); // sorted the data
...
...
...  
function mousemove() {
...
focus.select('#horizontalFocus')
.attr('x1', x).attr('y1', yScaleOne(yScaleOne.domain()[0]))
.attr('x2', x).attr('y2', yScaleOne(yScaleOne.domain()[1]));
focus.select('#verticalFocus')
.attr('x1', xScaleOne(xScaleOne.domain()[0])).attr('y1', y)
.attr('x2', xScaleOne(xScaleOne.domain()[1])).attr('y2', y);

希望这有帮助。如果您有任何问题，请告诉我。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium