d3.symbols 被 ClipPath 区域截断
d3.symbols being cut off by ClipPath area
仍在提高我对 D3 的能力的过程中,我遇到了一个问题,我试图在带有边距的 SVG 元素中绘制可缩放曲线(因此我需要一个 clipPath 矩形来避免该绘图缩放时侵入边距)但 clipPath 边距将 d3.symbols 的显示从图上切掉。
这是情节的相关代码
var margin = {top: 20, right: 60, bottom: 30, left: 30},
w = 960 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", w)
.attr("height", h);
// The curve I want to plot: y=x^2
var my_curve = d3.range(10).map(function(d) { var my_y = d * d; return { "x" : d, "y" : my_y }; });
var x_range_min = d3.min(my_curve, function(d) { return d.x; });
var x_range_max = d3.max(my_curve, function(d) { return d.x; });
var y_range_min = d3.min(my_curve, function(d) { return d.y; });
var y_range_max = d3.max(my_curve, function(d) { return d.y; });
var xScale = d3.scaleLinear().domain([x_range_min, x_range_max]).range([0, w]);
var yScale = d3.scaleLinear().domain([y_range_max, y_range_min]).range([0, h]);
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);
// symbols
svg.selectAll(".my_pts").data(my_curve).enter().append("path")
.attr("class", "my_pts")
.attr("d", d3.symbol().type(d3.symbolTriangle).size(200))
.attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; })
// with this zoomed line does not enter margin area
.attr("clip-path", "url(#clip)");
...如您所见,只描绘了三角形符号的一部分,我猜是因为路径是在 0,0 绘制的,并在执行翻译之前被 clipPath 剪切。
这个我也发了 fiddle https://jsfiddle.net/fabio_p/988c1sjv/
在这里你可以找到更完整的代码版本,带有画笔和缩放功能,这样你就可以看到为什么需要 clipPath(如果你以前从未遇到过边距问题)
我的问题如下:这个问题有解决方法吗?我希望找到一种方法直接在正确的位置绘制符号而不需要后期翻译(可能使用 "custom symbol type"),但它似乎超出了我目前的技能,因为我无法制作任何实际解决方案。
欢迎提出任何建议。提前致谢。
使用剪辑路径创建一个组:
var clipping = svg.append("g")
.attr("clip-path", "url(#clip)");
并将线条和符号附加到组中:
clipping.append("path")
.data([my_curve])
//etc...
这是您更新后的 fiddle:https://jsfiddle.net/cvtvrL2q/
仍在提高我对 D3 的能力的过程中,我遇到了一个问题,我试图在带有边距的 SVG 元素中绘制可缩放曲线(因此我需要一个 clipPath 矩形来避免该绘图缩放时侵入边距)但 clipPath 边距将 d3.symbols 的显示从图上切掉。
这是情节的相关代码
var margin = {top: 20, right: 60, bottom: 30, left: 30},
w = 960 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", w)
.attr("height", h);
// The curve I want to plot: y=x^2
var my_curve = d3.range(10).map(function(d) { var my_y = d * d; return { "x" : d, "y" : my_y }; });
var x_range_min = d3.min(my_curve, function(d) { return d.x; });
var x_range_max = d3.max(my_curve, function(d) { return d.x; });
var y_range_min = d3.min(my_curve, function(d) { return d.y; });
var y_range_max = d3.max(my_curve, function(d) { return d.y; });
var xScale = d3.scaleLinear().domain([x_range_min, x_range_max]).range([0, w]);
var yScale = d3.scaleLinear().domain([y_range_max, y_range_min]).range([0, h]);
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);
// symbols
svg.selectAll(".my_pts").data(my_curve).enter().append("path")
.attr("class", "my_pts")
.attr("d", d3.symbol().type(d3.symbolTriangle).size(200))
.attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; })
// with this zoomed line does not enter margin area
.attr("clip-path", "url(#clip)");
...如您所见,只描绘了三角形符号的一部分,我猜是因为路径是在 0,0 绘制的,并在执行翻译之前被 clipPath 剪切。
这个我也发了 fiddle https://jsfiddle.net/fabio_p/988c1sjv/ 在这里你可以找到更完整的代码版本,带有画笔和缩放功能,这样你就可以看到为什么需要 clipPath(如果你以前从未遇到过边距问题)
我的问题如下:这个问题有解决方法吗?我希望找到一种方法直接在正确的位置绘制符号而不需要后期翻译(可能使用 "custom symbol type"),但它似乎超出了我目前的技能,因为我无法制作任何实际解决方案。
欢迎提出任何建议。提前致谢。
使用剪辑路径创建一个组:
var clipping = svg.append("g")
.attr("clip-path", "url(#clip)");
并将线条和符号附加到组中:
clipping.append("path")
.data([my_curve])
//etc...
这是您更新后的 fiddle:https://jsfiddle.net/cvtvrL2q/