如何修复使用线性过滤折线图的剪辑路径时d3.js轴不匹配
我有一个简单的折线图,它是从一个web套接字连接馈送过来的,我正在应用一个“单调”过滤器来平滑这些线,因此为了避免看到这些线随着新数据的到来而调整,我正在剪切该图表,以隐藏本文中建议的最新数据点 但这使我的轴看起来不正确,右边缘有一个间隙,显示了剪辑矩形和实际输出域之间的差异,如您所见 我已经能够通过添加一个不同的x比例来解决这个问题,该比例可以减小clip rect中域的大小,但这对我来说似乎有问题,而且不是一个特别干净的解决方案 有没有正确的方法来解决这个问题 下面是一个简短的代码列表,显示了相关部分如何修复使用线性过滤折线图的剪辑路径时d3.js轴不匹配,d3.js,D3.js,我有一个简单的折线图,它是从一个web套接字连接馈送过来的,我正在应用一个“单调”过滤器来平滑这些线,因此为了避免看到这些线随着新数据的到来而调整,我正在剪切该图表,以隐藏本文中建议的最新数据点 但这使我的轴看起来不正确,右边缘有一个间隙,显示了剪辑矩形和实际输出域之间的差异,如您所见 我已经能够通过添加一个不同的x比例来解决这个问题,该比例可以减小clip rect中域的大小,但这对我来说似乎有问题,而且不是一个特别干净的解决方案 有没有正确的方法来解决这个问题 下面是一个简短的代码列表,
// Create an x-scale
var x = d3.scale.linear()
.domain([0, saved_points])
.range([0, width - margin]);
// Create the axis
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickValues([10,20,30,40,50,60,70,80,90]);
// Clip path truncates the last two points from the line, because adding new
// control points alters the shape of the line, and it "wiggles"
chart.append("defs")
.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width - margin - x(2))
.attr("height", height);
// Create the stack of lines
y_bands = d3.scale.ordinal().rangeBands([0,height]);
line = d3.svg.line()
.x(function(d,i){ return x(i); })
.y(function(d,i){
var a = -1.0 * (y(d.value) / y_bands.domain().length);
var b = y_bands(d.name);
var result = a + height - b;
return result;
})
.interpolate("monotone");
// Put the Axis at the bottom of the graph
d3.select("svg")
.append("svg:g")
.attr("class", "xaxis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis);
// Finally create all the paths
chart.selectAll("path")
.data(my_line_chart.values)
.enter()
.append("g")
.attr("clip-path", "url(#clip)")
.append("svg:path")
.attr("class", "line_chart")
.attr("stroke", function(d, i) { return color(i); })
.attr('d', function(d,i){ return line(my_line_chart.values[i]);} );
我还没有找到一个理想的解决方案,但我在问题中提到的技术确实有效 通过创建与剪辑路径大小匹配的第二个比例,而不是实际的数据范围,我可以用它绘制轴并使它们匹配
// define actual scales
var x = d3.scale.linear()
.domain([0, saved_points])
.range([0, width - margin]);
// Define a scale that's reduced in size of the output range by the
// length of two points of the actual scale.
var fake_x = d3.scale.linear()
.domain([0, saved_points - 2])
.range([0, width - margin - x(2)]);
// Use this fake scale for the axis instead of the real scale.
var xAxis = d3.svg.axis()
.scale(fake_x)
.tickSize(-height)
.tickValues(ticks);
// The clip path uses the same width reduced by two points
chart.append("defs")
.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width - margin - x(2))
.attr("height", height);
我所看到的这种方法的唯一缺点是,设置宽度动画有问题,因为伪x比例中的x(2)值没有转换。我还没有找到理想的解决方案,但我在问题中提到的技术确实有效 通过创建与剪辑路径大小匹配的第二个比例,而不是实际的数据范围,我可以用它绘制轴并使它们匹配
// define actual scales
var x = d3.scale.linear()
.domain([0, saved_points])
.range([0, width - margin]);
// Define a scale that's reduced in size of the output range by the
// length of two points of the actual scale.
var fake_x = d3.scale.linear()
.domain([0, saved_points - 2])
.range([0, width - margin - x(2)]);
// Use this fake scale for the axis instead of the real scale.
var xAxis = d3.svg.axis()
.scale(fake_x)
.tickSize(-height)
.tickValues(ticks);
// The clip path uses the same width reduced by two points
chart.append("defs")
.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width - margin - x(2))
.attr("height", height);
我所看到的这种方法的唯一缺点是,设置宽度的动画有问题,因为伪x比例中的x(2)值没有转换。是否也剪切轴?轴是根据您给定的比例生成的-如果您只是剪切图表,它应该不会对轴产生影响。不,我不剪切轴,因为我希望最右边的勾号结束图表。我已在问题中添加了相关代码
x.domain()
返回什么?您也剪切轴吗?轴是根据您给定的比例生成的-如果您只是剪切图表,它应该不会对轴产生影响。不,我不剪切轴,因为我希望最右边的勾号结束图表。我已将相关代码添加到问题x.domain()
返回什么?