如何用数据在两个轴之间画一条线？ （d3.js）

Question

I am trying to create a parallel coordinates with my own code, so that i can learn d3.js very well. Now i am stuck in a situation. I have two axis with some data in it

and i want to connect the data with a line. I tried of getting the position of the two data in the axes but its not working for me and its got complicated

Is there any way to connect the axes like this?

The jsfiddle link is commented below. Please find it

Thanks for the help

Answer 1

Appending an svg:line between those ticks is the way to go but the hard part is finding the proper positioning within the overall SVG document. Since things are being transitioned twice (once for the axis g and once for the tick g ), you have two options, sum up all the positions by using d3.tranform on the elements, or use something like getBoundingClientRect on the node.

In the below code I've chosen the later. This quick function will take the text value of any two ticks and draw a line. Note, those text values have to be unique:

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');

Full working example:

 var w = 200; var h = 400; var padding = 100; var x = ["a","b"]; var z = ["aa","ab","ba","bb"]; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); for(var i=1;i<3;i++){ var yScale = d3.scale.linear() .domain([0, i === 1 ? x.length : z.length]) .range([h - padding, padding]); //Define Y axis var yAxis = d3.svg.axis() .scale(yScale) .ticks(i === 1 ? x.length : z.length) .orient("left") .tickSize(1) .tickFormat(function(d){ return i === 1 ? x[d] : z[d]; }) // .style("text-anchor", "middle"); //Create SVG element svg.append("g") .attr("class", "axis" + i) .attr("transform", "translate("+(i*padding)+",0)") .call(yAxis) .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') .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'); 

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