Блог

Я работал над созданием диаграммы пончика, используя D3.js . Я следовал примеру, изложенному ЗДЕСЬ. Все шло отлично, пока я не дошел до раздела о полилиниях, проведенных от кусочков пончика до текстовых меток. Я точно скопировал пример кода, и хотя в их примере они получают красивые линии, я получаю треугольники, как показано ЗДЕСЬ.

Итак, помимо того, что он работает некорректно, я должен признать, что я не совсем понимаю фрагмент кода с полилиниями. Это делает так, что я даже не знаю, с чего начать поиск причины проблемы. Ниже приведен код рисования полилиний из моего проекта. Любая помощь или понимание приветствуются.

 var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline");

                    polyline.transition().duration(1000)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();
 

Редактировать

Итак, как обычно, когда я сдался и задал этот вопрос, я выяснил, что было не так. В примере, на который я ссылался, они используют таблицу стилей, чтобы установить для свойства fill значение none. Пока это работает, я бы предпочел, чтобы это оставалось в коде D3. Для любого заинтересованного это то, как будет выглядеть код.

 var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline")
                        .style("fill", "none")
                        .style("stroke-width", "2px")
                        .style("stroke", "black")
                        .style("opacity", "0.4");

                    polyline.transition().duration(500)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();
 

Итак, как обычно, когда я сдался и задал этот вопрос, я выяснил, что было не так. В примере, на который я ссылался, они используют таблицу стилей, чтобы установить для свойства fill значение none. Пока это работает, я бы предпочел, чтобы это оставалось в коде D3. Для любого заинтересованного это то, как будет выглядеть код.

 var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline")
                        .style("fill", "none")
                        .style("stroke-width", "2px")
                        .style("stroke", "black")
                        .style("opacity", "0.4");

                    polyline.transition().duration(500)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();