kann nicht Manhattan Stück mit d3

I machen müssen, um ein Manhattan Stück mit d3.js unter Verwendung des Datensatz unten angegeben (ein Teil) erzeugen:kann nicht Manhattan Stück mit d3

[ 
    { 
     'chromosome': 1, 
     'values': [ 
     { 
      'position': 78178310, 
      'p_value': 7.17731162216 
     }, 
     { 
      'position': 78178493, 
      'p_value': 3.03890339149 
     }, 
     .. 
     ] 
    }, 
    { 
     'chromosome': 2, 
     'values': [ 
     { 
      'position': 257683, 
      'p_value': 6.08904891824 
     }, 
     { 
      'position': 257742, 
      'p_value': 3.50110329843 
     }, 
     .. 
     ] 
    }, 
    ]

Die x-Achse hat eine Domäne mit Subdomänen. Die Domäne ist das Chromosom und die Subdomäne die Positionen für jedes Chromosom. Die y-Achse zeigt die p-Werte. Ich werde mein Problem mit dem Diagramm unten erklären:

Meine Punkte sind in der Lage, nicht die Positionen zu unterscheiden. Ich muss sie über die Subdomain verteilen, die jeder Position zugewiesen ist. Mein Code:

const margin = { top: 20, right: 20, bottom: 30, left: 40 }; 
const width = 1260 - margin.left - margin.right; 
const height = 500 - margin.top - margin.bottom; 

const x0 = d3.scale.ordinal() 
      .rangeRoundBands([0, width], .1); 

const x1 = d3.scale.ordinal(); 
const y = d3.scale.linear() 
      .range([height, 0]); 

const color = d3.scale.category20c(); 

const xAxis = d3.svg.axis().scale(x0).orient('bottom'); 

const yAxis = d3.svg.axis().scale(y).orient('left').tickFormat(d3.format('.2s')); 

let svg = d3.select('body').append('svg') 
      .attr('width', width + margin.left + margin.right) 
      .attr('height', height + margin.top + margin.bottom) 
      .append('g') 
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 

d3.csv('test.csv', (error, data) => { 

    if (error) { 
    throw error; 
    } 

    const x0Max = d3.max(data, (d) => { 
    return d.chromosome; 
    }); 

    const x1Max = d3.max(data, (d) => { 
    return parseInt(d.position); 
    }); 

    const yMax = d3.max(data, (d) => { 
    return parseFloat(d.p_value); 
    }); 

    x0.domain(data.map((d) => { return d.chromosome })); 
    console.log(x0.rangeBand()); 
    const x1 = d3.scale.ordinal() 
       .domain(data.map((d) => { return d.position })) 
       .rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, yMax]); 

    svg.append('g') 
    .attr('transform', 'translate(0, ' + height + ')') 
    .call(xAxis) 

    svg.append('g') 
    .call(yAxis) 
    .append('text') 
    .attr('transform', 'rotate(-90)') 
    .attr('y', 6) 
    .attr('dy', '.71em') 
    .style('text-anchor', 'end') 
    .text('p-value'); 

    // formatData returns data in the format shown above in this post 
    const input = formatData(data); 

    const chromosome = svg.selectAll('.chr') 
    .data(input) 
    .enter().append('g') 
    .attr('class', 'chr') 
    .attr('x', (d) => { 
     return x0(d.chromosome); 
    }) 
    .attr('transform', (d) => { 
     return 'translate(' + x0(d.chromosome) + ',0)'; 
    }) 
    .style('fill', (d) => { 
     return color(d.chromosome); 
    }); 

    chromosome.selectAll('circle') 
    .data((d) => { 
     return d.values; 
    }) 
    .enter().append('circle') 
    .attr('r', 3) 
    .attr('cx', (d, i) => { 
     return x1(d.position); 
    }) 
    .attr('cy', (d) => { 
     return y(d.p_value); 
    }); 
});

Es gibt eine SO Post mit fast der same problem. Es war wirklich hilfreich, aber ich kann es nicht mit der akzeptierten Antwort arbeiten. Ansonsten verwende ich diese post als Referenz.

Ich möchte x1 meine Subdomain und x0 meine primäre Domäne, wie in der gruppierten Balkendiagramm post. Mein Problem ist, dass ich die Subdomain nicht richtig mit der Domain verbinden kann. Dies ist auch mein erster Versuch mit d3.js und ich habe nicht alles in dem Code verstanden, den ich geschrieben habe, da ich mich stark auf das Beispiel verlassen habe. Bitte helfen Sie.

Quelle

2016-07-25 user3033194

Wenn Sie versuchen, eine Plunker oder eine Geige zu schaffen, wird es einfacher für jemanden, dir zu helfen. –

hast du irgendeine lösung bekommen? – Dinesh