無法與D3

創建曼哈頓情節我必須做出曼哈頓情節使用下面給出的數據集（一個部分）d3.js：無法與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 
     }, 
     .. 
     ] 
    }, 
    ]

x軸與子域的結構域。該域是染色體，子域是每個染色體的位置。 y軸顯示p值。我會跟下面的圖表解釋我的問題：

我點不能夠區分的位置。我需要它們遍佈分配給每個職位的子域。我的代碼：

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

有一個SO貼子差不多same problem。這真的很有幫助，但我無法讓它與接受的答案一起工作。除此之外，我使用這個post作爲參考。

我想讓x1我的子域和x0我的主域，如分組條形圖文章中所示。我的問題是我無法正確地將子域與域相關聯。此外，這是我第一次嘗試使用d3.js，並且我沒有理解我編寫的代碼中的所有內容，因爲我非常依賴該示例。請幫忙。

來源

2016-07-25 user3033194

輸出。如果可以的話，嘗試創建一個plunker或小提琴，這將是一個人更容易來幫你。 –

你有沒有得到任何解決方案？ – Dinesh