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){...}

は、このを見てくださいfiddle - jsfiddleは、コードを実験し、ゆっくりとプロジェクトを学び、構築するのに最適な場所です。

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

うーん... stackoverflowのは、それが今自分の "フィドル" 様の能力を持っているのです！ここでは、同じコードはこれは**ない**作業コードです...

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>