Question

我对编码非常陌生，也提出有关编码的问题。因此，如果我的解释过于复杂，或者您需要更多关于任何事情的背景等，请告诉我。

我正在创建地中海移民流动的互动地图。流量显示了意大利和希腊的移民流量的起源和目的地区域以及移民总数。流程应以类似方式显示在Sankey图中。因为我在地图上而不是以图表方式显示流程，所以我没有使用D3的Sankey插件，而是创建自己的路径。

My flow map, as of now (curved flows are on top of each other, should line up next to each other)

为了生成我的流程，我有四点：

流量的中间部分（国家总数）为2分
每个弯曲的外部部件（原点和目的地区域）各1个点，使用直的中间部分的两个点作为起点

直线中间和两个弯曲的外部部件均独立于其自己的数据源生成。通过更改数据源并再次调用该函数来更新流线。使用SVG路径迷你语言生成流线。为了使流动的弯曲外部部分正确显示，我需要将它们排列在一起。为了正确排列它们，我需要改变它们的起点。每个路径元素的移位距离由其前面的路径元素的宽度确定。因此，按国家/地区分组，每个路径元素 i 需要知道同一组中元素 0-i 的宽度总和。

使用d3.nest（）对我的数据进行分组后，这将允许我遍历每个组，我无法正确地将数据绑定到路径元素
我也无法弄清楚为所有元素0-i加起来的循环函数。这里有什么帮助？（对不起，如果这与绑定嵌套数据的问题无关）

这是曲线路径的工作函数，适用于未通过数据：

    function lineFlow(data, flowSubGroup, flowDir) {
            var flowSelect = svg.select(".flowGroup").select(flowSubGroup).selectAll("path");
            var flow = flowSelect.data(data);
            var flowDirection = flowDir;
            flow.enter()
            .append("path").append("title");
            flow
            .attr("stroke", "purple")
            .attr("stroke-linecap", "butt")
            .attr("fill", "none")
            .attr("opacity", 0.75)
            .transition()
                .duration(transitionDur)
                .ease(d3.easeCubic)
            .attr("d", function(d) {
                var
                    slope = (d.cy2-d.cy1)/(d.cx2-d.cx1),
                    dist = (Math.sqrt(Math.pow((d.rx2-d.rx1),2)+Math.pow((d.ry2-d.ry1),2)))*0.5,
                    ctrlx = d.rx1 + Math.sqrt((Math.pow(dist,2))/(1+Math.pow(slope,2)))*flowDirection,
                    ctrly = slope*(ctrlx-d.rx1)+d.ry1;
                return "M"+d.rx1+","+d.ry1+"Q"+ctrlx+","+ctrly+","+d.rx2+","+d.ry2})
            .attr("stroke-width", function(d) {return (d.totalmig)/flowScale});
            flowSelect
                .select("title")
                .text(function(d) {
                     return d.region + "\n"
                     + "Number of migrants: " + addSpaces(d.totalmig)});
        };

我尝试调整代码以处理按国家/地区分组的数据：

    function lineFlowNested(data, flowSubGroup, flowDir) {
            var g=svg.select(".flowGroup").select(flowSubGroup).append("g").data(data).enter();
            var gflowSelect=g.selectAll("path");
            var gflow=gflowSelect.data (function(d) {return d.values});
            gflow.enter()
            .append("path");
            gflow.attr("stroke", "purple")
            .attr("stroke-linecap", "butt")
            .attr("fill", "none")
            .attr("opacity", 0.75)
            // .transition()
                // .duration(transitionDur)
                // .ease(d3.easeCubic)
            .attr("d", function(d) {
                var
                    slope = (d.cy2-d.cy1)/(d.cx2-d.cx1),
                    dist = (Math.sqrt(Math.pow((d.rx2-d.rx1),2)+Math.pow((d.ry2-d.ry1),2)))*0.5,
                    ctrlx = d.rx1 - Math.sqrt((Math.pow(dist,2))/(1+Math.pow(slope,2)))*flowDirection,
                    ctrly = slope*(ctrlx-d.rx1)+d.ry1;
                return "M"+d.rx1+","+d.ry1+"Q"+ctrlx+","+ctrly+","+d.rx2+","+d.ry2})
            .attr("stroke-width", function(d) {return (d.totalmig)/flowScale});
        };

哪个不行。我究竟做错了什么？谢谢你的任何提示！

D3.js绑定嵌套数据

0 个答案: