D3六边形边缘

时间:2016-03-07 14:56:06

标签: d3.js

@drinck:非常感谢,你帮了我很大的时间。

我还有一个问题,如果你可以检查它...在图像上你可以看到我如何编码情况和我有什么和所需的六边形。

http://i.stack.imgur.com/eb9y8.jpg

我的功能是将六边形1绘制在另一个

function drawHexa ($container) {
    var $cont = $($container);
    var contW = $cont.width();
    var contH = $cont.height();
    var color = $cont.data('color');
    var pointSrc = $cont.data('points');
    var pointData = [];

    $.ajax({
        url: pointSrc,
    }).done(function(response) {
        for (var i = 0; i < response.points.length; i++) {
            pointData.push(response.points[i]);
        };

        var svgContainer = d3.select($container) //create container
            .append("svg")
            .attr("width", contW)
            .attr("height", contH);

        var line = d3.svg.line()
            .interpolate('linear')
            .x(function(d,i) { return d[0];})
            .y(function(d) { return d[1];});

        var path = svgContainer.append('path')
            .attr('d', line(pointData))
            .attr('stroke', color)
            .attr('stroke-width', '22')
            .attr('fill', 'none');

        var totalLength = path.node().getTotalLength();

        path
            .attr("stroke-dasharray", totalLength + " " + totalLength)
            .attr("stroke-dashoffset", totalLength)
            .transition()
            .duration(1500)
            .ease("linear")
            .attr("stroke-dashoffset", 0);
    });

}

你认为这可以用d3完成吗?

0 个答案:

没有答案