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>