我正在使用焦点 + 上下文 d3 可视化。我使用的是路径而不是面积图，这是 bl.ocks.org 上的示例。不幸的是，我无法让它正常工作。我很快注意到我并不是唯一一个努力重新调整这张图的人。请参阅这篇文章:
D3.js Focus + Context Overflow
我的画笔可以工作，但焦点缩放似乎不起作用。我不知道为什么三天后还没有解决。我有很多时间和很多例子，这样我就可以从别人的错误中学习。在上一篇文章中，url(#clip) 是问题所在，但是，在我的图表中，问题似乎更多是画笔/缩放功能的问题。另一件让我困惑的事情是我使用的是 d3 版本 3，所以当前的示例 block 不太容易从中推断出事情。 d3 v4 中的语法/函数调用有很多差异。
d3.v4.js 中臭名昭著的 bruzh 缩放 block : https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
我想知道为什么这么多人为此苦苦挣扎。也许我们只是粗心，但我怀疑这里也可能发生了一些棘手/微妙的事情。
有人可以在 d3.v3 中为我的图表发布 fiddle 或功能缩放 block 吗？我很想看看你是如何做到的。
这是我的 block : https://bl.ocks.org/diggetybo/f46ebec18dda16bf39f41b9282b5b593
这是全屏图: https://bl.ocks.org/diggetybo/raw/f46ebec18dda16bf39f41b9282b5b593/
非常感谢
最佳答案
您没有在画笔事件中“重绘”线条路径:
var brush = d3.svg.brush()
.x(xScaleBottom)
.on('brush', function brushed() {
xScaleTop.domain(brush.empty() ? xScaleBottom.domain() : brush.extent());
focus.select('.line').attr('d', lineTop); //<-- REDRAW LINE
focus.select('.x.axis').call(xAxisTop);
});
请注意，您还有一个未使用的 brushed 函数(我花了一秒钟才找到实际的事件处理程序)。
这是您正在运行的代码:
<!DOCTYPE html>
<html>
<head>
<title>Focus + Context</title>
<style type="text/css">
p {
color: white
}
body {
background-color: #282c34
}
</style>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body style="overflow: hidden">
<p>Programming underway, please stand by.</p>
<script>
var width = 600,
height = 400;
var margins = {
top: 10,
left: 50,
right: 50,
bottom: 50,
between: 50
};
var bottomGraphHeight = 50;
var topGraphHeight = height - (margins.top + margins.bottom + margins.between + bottomGraphHeight);
var graphWidths = width - margins.left - margins.right;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.style('font', '10px sans-serif');
svg.append('defs')
.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', width)
.attr('height', height);
var focus = svg
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
var context = svg.append('g')
.attr('class', 'context')
.attr('transform', 'translate(' + margins.left + ',' +
(margins.top + topGraphHeight + margins.between) + ')');
var xScaleTop = d3.scale.linear().range([0, graphWidths]),
xScaleBottom = d3.scale.linear().range([0, graphWidths]),
yScaleTop = d3.scale.linear().range([topGraphHeight, 0]),
yScaleBottom = d3.scale.linear().range([bottomGraphHeight, 0]);
var xAxisTop = d3.svg.axis().scale(xScaleTop).orient('bottom'),
xAxisBottom = d3.svg.axis().scale(xScaleBottom).orient('bottom');
var yAxisTop = d3.svg.axis().scale(yScaleTop).orient('left');
var lineTop = d3.svg.line()
.x(function(d, i) {
return xScaleTop(i);
})
.y(function(d) {
return yScaleTop(d.y2);
});
var lineBottom = d3.svg.line()
.x(function(d, i) {
return xScaleBottom(i);
})
.y(function(d) {
return yScaleBottom(d.y2);
});
var brush = d3.svg.brush()
.x(xScaleBottom)
.on('brush', function brushed() {
xScaleTop.domain(brush.empty() ? xScaleBottom.domain() : brush.extent());
focus.select('.line').attr('d', lineTop);
focus.select('.x.axis').call(xAxisTop);
});
var url = "https://gist.githubusercontent.com/diggetybo/f46ebec18dda16bf39f41b9282b5b593/raw/70c279b9aef16f5348bc3185909c4b001414a611/wav_2.tsv";
d3.tsv(url, function(error, rawData) {
var data = rawData.map(function(d) {
return {
y2: +d.wav1
}
});
xScaleTop.domain(d3.extent(data, function(d, i) {
return i;
}));
yScaleTop.domain([-.02, .02]);
xScaleBottom.domain(d3.extent(data, function(d, i) {
return i;
}));
yScaleBottom.domain([-.02, .02]);
var topXAxisNodes = focus.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + 0 + ',' + (margins.top + topGraphHeight) + ')')
.call(xAxisTop);
styleAxisNodes(topXAxisNodes, 0);
focus.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', lineTop);
var topYAxisNodes = focus.append('g')
.call(yAxisTop);
styleAxisNodes(topYAxisNodes);
context.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', lineBottom);
var bottomXAxisNodes = context.append('g')
.attr('transform', 'translate(0,' + bottomGraphHeight + ')')
.call(xAxisBottom);
styleAxisNodes(bottomXAxisNodes, 0);
context.append('g')
.attr('class', 'x brush')
.call(brush)
.selectAll('rect')
.attr('y', -6)
.attr('height', bottomGraphHeight + 7);
context.selectAll('.extent')
.attr({
stroke: '#000',
'fill-opacity': 0.125,
'shape-rendering': 'crispEdges'
});
styleLines(svg);
});
function styleLines(svg) {
svg.selectAll('path.line')
.attr({
fill: 'none',
'stroke-width': 1.5,
stroke: 'steelblue',
'clip-path': 'url(#clip)'
});
}
function styleAxisNodes(axisNodes, strokeWidth) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
'stroke-width': strokeWidth,
stroke: 'black'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'black'
});
}
</script>
</body>
</html>关于javascript - 全画笔无缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39830232/