D3中的序數散點圖

Question

我試圖用D3.js重新創建這個圖，但是我遇到了一些麻煩。

我很新的D3，我一直沒能找到與序數值散點圖的例子。我也遇到了麻煩，包括y軸上的正值和負值。通過使用條形圖示例，我非常接近，但是這些點並未集中在軸標記上，並且圖中完全沒有負值。

我使用的是彌補了這個數據，但該點應該是在「價值」和該行應該從分去最大爲每個表型。顯然，我的方法有幾個問題。

var plot_data = [ 
    [{Phenotype: 'TG', value: 0.01, min: -0.1, max: 0.4}, 
    {Phenotype: 'LDL', value: -0.29, min: -0.5, max: -0.1}, 
    {Phenotype: 'HDL', value: 0.41, min: 0.0, max: 0.5}, 
    {Phenotype: 'TC', value: 0.07, min: -0.2, max: 0.4}]]; 

如果任何人都可以指向我做一個類似的例子，將不勝感激。

<script> 

var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom ; 
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 
var y = d3.scale.linear().range([height, 0]); 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("middle"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(4); 

var svg = d3.select("#cluster_".concat("{{ n }}")).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 + ")"); 

var plot_data = [ 
    [{Phenotype: 'TG', value: 0.01, min: -0.1, max: 0.4}, 
    {Phenotype: 'LDL', value: -0.29, min: -0.5, max: -0.1}, 
    {Phenotype: 'HDL', value: 0.41, min: 0.0, max: 0.5}, 
    {Phenotype: 'TC', value: 0.07, min: -0.2, max: 0.4}]]; 

plot_data.forEach(function(data){ 
    x.domain(data.map(function(d) { return d.Phenotype; })); 
    y.domain([0, d3.max(data, function(d) { return d.value; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", "-.55em") 
     .attr("transform", "rotate(-90)"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 

    svg.selectAll("scatter-dots") 
     .data(data) 
    .enter().append("svg:circle") 
     .style("fill", "steelblue") 
     .attr("cx", function(d) { return x(d.Phenotype); }) 

     .attr("cy", function(d) { return y(d.value); }) 
     .attr("r", 8); 

    svg.selectAll("bar") 
     .data(data) 
     .enter().append("rect") 
     .style("fill", "steelblue") 
     .attr("x", function(d) { return x(d.Phenotype); }) 
     .attr("width", 1) 
     .attr("y1", function(d) { return y(d.min); }) 
     .attr("y2", function(d) { return y(d.max); }) 
     .attr("height", function(d) { return Math.abs(y(d.max) - y(d.min));}); 
</script> 

Similar issues之前已發佈，但似乎沒有解決。

Answer 1

你有幾件事情需要修復，但你在正確的軌道上。我建議你看看網上的一些優秀資源。特別是，https://leanpub.com/D3-Tips-and-Tricks。

1. 你plot_data陣列應該是對象的數組，而不是一個數組的數組。

2. 這個循環是不必要的 - D3的要點之一是，它已經「加入」，在許多情況下，需要循環的地方：

   plot_data.forEach(function(data){...}

看一看這個小提琴 - jsfiddle是試驗代碼並慢慢學習和建立項目的好地方。

https://jsfiddle.net/sanandak/8h7hzyw5/1/

嗯..＃2具有它現在是自己的 「小提琴」 般的能力！下面是相同的代碼...

var svg = d3.select('body').append('svg') 
 
svg.attr('width', 300).attr('height', 300) 
 

 
svg.append('g').attr('class', 'axis x-axis') 
 
svg.append('g').attr('class', 'axis y-axis') 
 

 
var plot_data = [ 
 
    {Phenotype: 'TG', value: 0.01, min: -0.1, max: 0.4}, 
 
    {Phenotype: 'LDL', value: -0.29, min: -0.5, max: -0.1}, 
 
    {Phenotype: 'HDL', value: 0.41, min: 0.0, max: 0.5}, 
 
    {Phenotype: 'TC', value: 0.07, min: -0.2, max: 0.4}]; 
 
    
 
var xScale = d3.scalePoint() 
 
\t .domain(['TG', 'LDL', 'HDL', 'TC']) 
 
    .range([30,290]) 
 
    
 
var yScale = d3.scaleLinear() 
 
\t .domain([-1, 1]) 
 
    .range([290, 30]) 
 
    
 
var xAxis = d3.axisBottom(xScale); 
 
var yAxis = d3.axisRight(yScale); 
 

 
svg.select('.x-axis').call(xAxis); 
 
svg.select('.y-axis').call(yAxis); 
 
    
 
var circles = svg.append('g') 
 
\t .selectAll('.circle') 
 
    .data(plot_data) 
 
    .enter() 
 
    .append('circle') 
 
    .attr('class', 'circle') 
 
    .attr('cx', function(d) {return xScale(d.Phenotype);}) 
 
    .attr('cy', function(d) {return yScale(d.value);}) 
 
    .attr('r', 5) 
 
    .attr('fill', 'red') 
 
    
 
var eWidth = 2; 
 
var errbars = svg.append('g') 
 
\t .selectAll('.errbars') 
 
\t .data(plot_data) 
 
    .enter() 
 
    .append('rect') 
 
    .attr('class', 'errbars') 
 
    .attr('x', function(d) {return xScale(d.Phenotype) - eWidth/2;}) 
 
    .attr('y', function(d) {return yScale(d.max);}) 
 
    .attr('width', eWidth) 
 
    .attr('height', function(d) {return yScale(d.min) - yScale(d.max);})

<script src="//d3js.org/d3.v4.min.js"></script>