树形图中链接方向的方向不正确 [英] Direction of link orientation in tree diagram incorrect

问题描述

从树图示例开始

而不是这样;

我试图改变

我也尝试在稍微复杂一点的代码中做同样的事情。进入链接，链接再次显示不正确的方向。

我不得不认为我需要包括一个额外的评估员来解释曲线的方向，但是如果我能看到它。

启动代码

这样还可让您访问来源和目标评估者，同时保持正确的对齐方式作为目标。

爱你的D3网站，这是一个伟大的资源。

Starting from the tree diagram example here I want to change the links so that the source and target locations of each can be altered relative to their common meeting point. My current progress point is here (these examples are contrived to demonstrate the problem, but I believe it does so adequately).

This appears to be possible using the source and target assessor functions. I have therefore edited the original code for the diagonal variable from;

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

to;

var diagonal = d3.svg.diagonal()
    .source(function(d) { return {x: d.source.y , y: d.source.x}; })
    .target(function(d) { return {x: d.target.y , y: d.target.x}; });

Which has worked fine for the locations, but the links think that they are still vertical and as a result look like this;

rather than this;

I have tried altering the orientations of the x / y values in the diagonal variable declaration which only succeeds in orientating the tree links vertically.

I have also tried doing the same in a slightly more complex piece of code when entering the links, with the links appearing with the incorrect orientation again.

I can't help but think that I need to be including an additional assessor to account for the direction of the curve, but I'm darned if I can see it.

Starting code here.

Adapted code here.

Many thanks for you attention.

解决方案

I may be completely missing something here. But but replacing:

.projection(function(d) { return [d.y, d.x]; });

with:

.source(function(d) { return {x: d.source.y , y: d.source.x}; })
.target(function(d) { return {x: d.target.y , y: d.target.x}; });

almost replicates the functionality of .projection, except for how the lines are interpolated. Instead, if you set the projection as it was originally and define the the x and y coordinates for source and target normally, the entire diagram is flipped from vertical alignment to horizontal:

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; })
  .source(function(d) { return {x: d.source.x , y: d.source.y}; })
  .target(function(d) { return {x: d.target.x , y: d.target.y}; })

Giving:

Which still gives you access to the source and target assessors while maintaining a correct alignment, which I take as the goal.

Love your D3 site by the way, it's a great resource.

这篇关于树形图中链接方向的方向不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！