使d3.svg.symbol()。type(" triangle-up")面向一个特定的方向

时间:2015-07-20 15:42:36

标签: javascript css d3.js svg geo

我使用d3.svg.symbol().type("triangle-up")作为显示路径预期方向的方法。 查看图片我的意思

我需要三角形的方向面向路径的终点。

我可以将三角形定位在路径的中间点并手动旋转它,但是,我不知道箭头需要面向哪个方向,因为路径并不总是相同。

以下是我目前所拥有的图片:

enter image description here

这是我想要实现的目标的图像:

enter image description here

这是我现在使用的代码:

请不要将代码的翻译部分中的值作为曲线的中间点

radiusSensorsG.append("path")
    .attr("class", "curved-triangles")
    .attr("d", d3.svg.symbol().type("triangle-up").size(10)))
    .attr("transform", function () {
        if(index % 2 == 0) {
            return "translate(" +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).x + "," +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).y + ")";
        } 
        else {
            return "translate(" +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).x + "," +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).y + ")";

        }
    })

如果它以任何方式帮助回答,我有粉红色标记的lat / lng位置。这些粉红色标记是我需要的绿色箭头朝向,粉红色的箭头朝向大绿色圆圈。

如果有任何我未提供的信息,请告诉我。

由于

0 个答案:

没有答案