获取剪裁线可见区域长度 d3

Posted

技术标签:

【中文标题】获取剪裁线可见区域长度 d3【英文标题】:Get Clipped Line Visible Area Length d3 【发布时间】:2020-01-19 02:56:00 【问题描述】:

我正在尝试使用ClipPath 剪裁一条带圆圈的线,并通过拖动成功完成。这是我的工作代码;

function clipData(svg, cx, cy) 

    var clip = svg.append("defs")
        .append("clipPath") // define a clip path
        .attr("id", "clip") // give the clipPath an ID
        .append("circle") // shape it as an ellipse
        .attr("id", "my-circle")
        .attr("cx", 100) // position the x-centre
        .attr("cy", 80) // position the y-centre
        .attr("r", 80) // set the x radius
        .attr("fill", "yellow")

    svg.append("circle") // shape it as an ellipse
        .attr("cx", 100) // position the x-centre
        .attr("cy", 80) // position the y-centre
        .attr("r", 80) // set the x radius
        .attr("fill", "red")


    var g = svg.append("g")
        .datum(
            x: 0,
            y: 0
        )
        .attr("id", "child")
        //.attr("transform", function(d)  return 'translate(' + d.x + ' '+ d.y + ')'; )

        .call(d3.drag()
            .on("start", function(d) 
                d3.select(this).raise().classed("active", true);

            )
            .on("drag", function(d) 
                d3.select(this).attr("transform", "translate(" + (d3.event.x) + "," + (d3.event.y) + ")");
                d3.select("#svgGreen").selectAll("*").remove();
                clipData(svg, d3.event.x + cx, d3.event.y + cy);

            )
            .on("end", function(d) 
                d3.select(this).classed("active", false);
            ));


    g.append("line")
        .attr("clip-path", "url(#clip)")
        .attr("x1", cx)
        .attr("y1", cy)
        .attr("x2", cx + 100)
        .attr("y2", cy + 100)
        .style("stroke", "purple")
        .style("stroke-width", 12)



var svg = d3.select("#svgGreen");
var cx = 100,
    cy = 80,
    x = 0,
    y = 0;

clipData(svg, cx, cy);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  className="clip-path" id="svgGreen">
</svg>

现在我试图在剪辑后获得length of Visible part of Line。但是当我尝试从线的 x-y 点获取它时,我总是得到与剪裁前相同的长度,

有什么方法可以让我在之后只获得可见的线长 剪辑??

【问题讨论】:

您能否进一步说明您想要实现的目标? 最简单的事情是..我有一条线,正在被一个圆圈剪裁,所需要的只是剪裁后线条可见区域的长度..我现在无法得到..我没有找到任何其他解决方案 如果你需要上面代码sn-p上的线的长度,那么你可以得到那个圆的半径,它会是一样的:) 但它并不总是圆形......它也可以是多边形或任何其他弯曲路径 【参考方案1】:

根据MDN

剪切路径在概念上等同于自定义视口 引用元素。因此,它会影响元素的渲染, 但不是元素的固有几何形状:裁剪的边界框 元素(意思是一个元素通过引用一个元素 剪辑路径属性或引用元素的子元素)必须 保持不变,就好像它没有被剪裁一样。

因此,无论是否裁剪,此元素的大小始终保持不变。我认为您应该考虑使用另一种方法来满足您的需求。

【讨论】:

@NullPointer 你能分享一下吗?

以上是关于获取剪裁线可见区域长度 d3的主要内容,如果未能解决你的问题,请参考以下文章

计算沿预定义线串从线串开始到围绕该线串的缓冲区域内的点的路线长度

绘制因子超过1000的短线和长线,以便两者都可见

将 y 轴网格线添加到 D3 甘特图

影响 Access 中报告长度的不可见标签和组合框

js或者jquery如何获取自适应宽度的具体值

将由多条线组成的标签垂直居中于 D3 力有向图中的节点上