剪辑路径不尊重轴在d3js
Clip-path not honouring axis in d3js
我有一个clippath,它适用于我的大多数元素,除了我正在渲染的自定义轴。在示例https://jsfiddle.net/7992sgbe/中,您可以看到,当您移动/平移线条时。蓝色的坐标轴不尊重剪贴线。我尝试在代码中重新定位剪辑的顺序,但似乎没有任何效果。
var clip = svg.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var chartBody = svg.append("g")
.attr("clip-path", "url(#clip)");
轴的代码如下
var make_x_marker = function (scale=1, transform=[0,0]) {
console.log(transform)
var markers =[];
var markerLabels={};
for (i=0; i<raw['ecg-markers'].length; i++)
{
var value=(1000/244.140625)*raw['ecg-markers'][i];
value=x(raw.meta.startts+value)
markers.push(value)
markerLabels[value]="A"+Math.floor(Math.random()*26);
}
return d3.svg.axis()
.orient("top")
.tickValues(markers)
.tickSize(height-15)
.tickFormat(function(d){return markerLabels[d]})
};
svg.append("g")
.attr("class", "x marker")
.attr("transform", "translate(0," + height + ")")
.call(make_x_marker());
基本上,您将蓝色线条放置在错误的容器中,因此剪辑路径不知道它们。添加到图表主体,而不是SVG。
更新小提琴:https://jsfiddle.net/thatOneGuy/7992sgbe/1/
var chartBody = svg.append("g")
.attr("clip-path", "url(#clip)");
chartBody.append("g")
.attr("class", "x marker")
.attr("transform", "translate(0," + height + ")")
.call(make_x_marker());
p>
已经编辑了你的代码,因为你有很多重复的代码,可以用更少的代码编写使用for循环。例子:svg.select(".line0")
.attr("class", "line0")
.attr("d", line0);
svg.select(".line1")
.attr("class", "line1")
.attr("d", line1);
svg.select(".line2")
.attr("class", "line2")
.attr("d", line2);
svg.select(".line3")
.attr("class", "line3")
.attr("d", line3);
svg.select(".line4")
.attr("class", "line4")
.attr("d", line4);
svg.select(".line5")
.attr("class", "line5")
.attr("d", line5);
可以这样写:
var linesArray = [line0, line1, line2, line3, line4, line5]
for (var i = 0; i < linesArray.length; i++) {
chartBody.append("svg:path")
.datum(data)
.attr("class", "line" + i)
.attr("d", linesArray[i]);
}
我还编辑了缩放功能中的
相关文章:
- Javascript:使用绝对路径设置img src
- 如何在d3.js中返回路径的y坐标
- 复制图像路径以单击它
- 从模块内部访问Express装载路径
- JS文件的路径正在消失
- 使用onclick绘制SVG路径
- jpm的默认Firefox路径没有'不起作用
- 如何使用jquery将base64图像路径转换为真实路径
- d3js文本传输-示例代码不起作用
- 可以用'吗/'在相对路径中
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 将Windows文件路径组织到文件夹中
- Ajax URL路径未替换当前URL
- 可折叠树布局中的 D3JS 路径生成器
- 使用d3js制作SVG路径动画
- 用d3js中的(动画)路径连接点
- D3js-2条路径之间的平滑过渡
- 剪辑路径不尊重轴在d3js
- D3js 将路径“d”属性绑定到数据
- D3js -在饼状图中添加路径之间的透明间隙