Как нарисовать линию между двумя осями с данными? (d3.js)

Question

Я пытаюсь создать параллельные координаты с моим собственным кодом, так что я могу хорошо изучить d3.js. Теперь я застрял в ситуации. У меня есть две оси с некоторыми данными в ней

и я хочу связать данные с линией. Я попытался получить положение двух данных в осях, но он не работает для меня, и его сложность

Есть ли способ подключения осей, как это?

Комментировать jsfiddle см. Ниже. Вы можете найти его

Спасибо за помощь

Answer 1

присоединени svg:line между этими клещами является путем, но твердая часть находит правильное позиционирование в рамках общего документа SVG. Так как вещи переходят дважды (один раз для оси g и один раз для галочки g), у вас есть две опции, суммируйте все позиции с помощью d3.tranform на элементах или используйте что-то вроде getBoundingClientRect на узле.

В приведенном ниже коде я выбрал более поздний вариант. Эта быстрая функция примет значение text любых двух тиков и нарисует линию. Обратите внимание, что эти текстовые значения должны быть уникальными:

function addLine(t1, t2){ 
    var ticks = {}; 
    d3.selectAll('.tick text').each(function(d) { 
     ticks[d3.select(this).text()] = this; 
    }); 
    var pos1 = ticks[t1].getBoundingClientRect(); 
    var pos2 = ticks[t2].getBoundingClientRect(); 

    svg.append('line') 
     .attr('x1', pos1.left) 
     .attr('y1', pos1.top + 5) 
     .attr('x2', pos2.left - 5) 
     .attr('y2', pos2.top + 5) 
     .style('stroke','black'); 
} 

addLine('a', 'ab'); 
addLine('a', 'bb'); 

Полный рабочий пример:

var w = 200; 
 
var h = 400; 
 
var padding = 100; 
 
var x = ["a","b"]; 
 
var z = ["aa","ab","ba","bb"]; 
 

 
var svg = d3.select("body") 
 
\t \t \t \t \t \t .append("svg") 
 
\t \t \t \t \t \t .attr("width", w) 
 
\t \t \t \t \t \t .attr("height", h); 
 

 
for(var i=1;i<3;i++){ 
 
    
 
\t var yScale = d3.scale.linear() 
 
\t \t \t \t \t \t .domain([0, i === 1 ? x.length : z.length]) 
 
\t \t \t \t \t \t .range([h - padding, padding]); 
 

 
\t \t \t //Define Y axis 
 
\t \t \t var yAxis = d3.svg.axis() 
 
\t \t \t \t \t \t .scale(yScale) 
 
\t \t \t \t \t \t .ticks(i === 1 ? x.length : z.length) 
 
\t \t \t \t \t \t .orient("left") 
 
\t \t \t \t \t \t .tickSize(1) 
 
\t \t \t \t \t \t .tickFormat(function(d){ 
 
           return i === 1 ? x[d] : z[d]; 
 
          }) 
 
\t \t \t \t \t \t 
 
// \t \t \t \t \t \t .style("text-anchor", "middle"); 
 

 
\t \t \t //Create SVG element 
 
\t \t \t svg.append("g") 
 
\t \t \t \t .attr("class", "axis" + i) 
 
\t \t \t \t .attr("transform", "translate("+(i*padding)+",0)") 
 
\t \t \t \t .call(yAxis) 
 
\t \t \t \t .attr("fill","red"); 
 
} 
 

 
function addLine(t1, t2){ 
 
    var ticks = {}; 
 
    d3.selectAll('.tick text').each(function(d) { 
 
     ticks[d3.select(this).text()] = this; 
 
    }); 
 
    var pos1 = ticks[t1].getBoundingClientRect(); 
 
    var pos2 = ticks[t2].getBoundingClientRect(); 
 
    
 
    svg.append('line') 
 
    \t .attr('x1', pos1.left) 
 
     .attr('y1', pos1.top + 5) 
 
     .attr('x2', pos2.left - 5) 
 
     .attr('y2', pos2.top + 5) 
 
    \t .style('stroke','black'); 
 
} 
 

 
addLine('a', 'ab'); 
 
addLine('a', 'bb');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>