d3-delaunay线条不显示

在使用d3-delaunay库绘制三角剖分的过程中，有时候线条可能不会显示出来。这可能是因为没有设置线条的样式或者没有正确绘制线条。

以下是一个示例代码，展示了如何使用d3-delaunay库绘制三角剖分并设置线条的样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>d3-delaunay线条不显示示例</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="https://unpkg.com/d3-delaunay@6"></script>
</head>
<body>
    <svg id="svg"></svg>

    <script>
        const svg = d3.select("#svg");
        const width = +svg.attr("width");
        const height = +svg.attr("height");

        // 生成一些随机点
        const points = Array.from({length: 100}, () => [Math.random() * width, Math.random() * height]);

        // 创建三角剖分
        const delaunay = d3.Delaunay.from(points);

        // 获取三角形的索引和坐标
        const {triangles, coords} = delaunay;

        // 绘制三角形的边线
        svg.append("g")
            .selectAll("line")
            .data(delaunay.hullPolygon().edges)
            .enter()
            .append("line")
            .attr("x1", d => coords[d[0]][0])
            .attr("y1", d => coords[d[0]][1])
            .attr("x2", d => coords[d[1]][0])
            .attr("y2", d => coords[d[1]][1])
            .style("stroke", "black")
            .style("stroke-width", 1);

        // 绘制三角形的内部线条
        svg.append("g")
            .selectAll("line")
            .data(triangles)
            .enter()
            .append("line")
            .attr("x1", d => coords[d[0]][0])
            .attr("y1", d => coords[d[0]][1])
            .attr("x2", d => coords[d[1]][0])
            .attr("y2", d => coords[d[1]][1])
            .attr("x3", d => coords[d[2]][0])
            .attr("y3", d => coords[d[2]][1])
            .style("stroke", "black")
            .style("stroke-width", 1);

    </script>
</body>
</html>

在这个示例代码中，首先创建了一个SVG元素，并设置了其宽度和高度。然后，使用Delaunay.from方法从随机生成的点数组中创建了一个三角剖分对象delaunay。接下来，使用hullPolygon().edges方法获取三角剖分的边线，并使用enter方法绑定数据，并使用append方法添加线条元素。通过设置attr方法来指定线条的起点和终点的坐标，通过设置style方法来设置线条的颜色和宽度。

最后，使用triangles数组绘制三角剖分的内部线条，方式与绘制边线相同。

通过以上示例代码，你可以在d3-delaunay库中正确显示线条。如果线条仍然不显示，可能是其他的问题导致的，你可以进一步检查代码是否有其他错误。

本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。

展开更多

开发者特惠

面向开发者的云福利中心，ECS 60元/年，域名1元起，助力开发者快速在云上构建可靠应用

ECS首年60元

社区干货

火山引擎部署ChatGLM-6B实战指导

(https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/3eccfcd3eb7c4c7aaba2e20fc6f213d6~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1716049294&x-signature=OAnRo5qJTmANajZLPLbv1ox8... "content": "类型#上衣*版型#宽松*版型#显瘦*图案#线条*衣样式#衬衫*衣袖型#泡泡袖*衣款式#抽绳", "summary": "这件衬衫的款式非常的宽松,利落的线条可以很好的隐藏身材上的小缺点,穿在身上有着很...

干货|字节跳动数据血缘图谱升级方案设计与实现

(https://p3-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/479c3b9f3e894bac8cd454cb18294d6b~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1716049248&x-signature=DwTTtTKqgNNc%2BPZkReD3YT... 因此表名只能显示几个字符,不具备辨识度。+ 无法知晓表到表之间的任务:旧版血缘图谱仅在侧边栏列出了与当前表相关的任务有哪些并未列出加工逻辑的对应关系,归因分析困难。+ 分组结构不清晰:旧版是在原图中框出节...

基于 Flink 构建实时数据湖的实践

即上图中对蓝色线条的描述,如果 Schema 是已经生成过的,就返回旧的 Schema id。FlinkSchemaEvolvingSink 中维护一个 Streamwriter 的 Map,其中 Key 是 Schema ID,当 Schema 传递过来之后会判断是否含有该 Schema的 Writer,如果没有就会去创建一个 Writer,这样就可以满足在同一个作业中写入多种 Schema 信息。 **整库同步和自动建表**![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tl...

特惠活动

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选

￥1.00/首年起32.00/首年起

立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠

￥2.00/年20.00/年

立即购买

d3-delaunay线条不显示-优选内容

火山引擎部署ChatGLM-6B实战指导

干货|字节跳动数据血缘图谱升级方案设计与实现

基于 Flink 构建实时数据湖的实践