javascript - 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(函数(数据){...}

看看这个 fiddle - jsfiddle 是一个很好的地方，可以尝试代码并慢慢学习和构建项目。

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

嗯.. Stackoverflow 现在拥有自己的类似“ fiddle ”的功能!这是相同的代码...

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()
	.domain(['TG', 'LDL', 'HDL', 'TC'])
  .range([30,290])
  
var yScale = d3.scaleLinear()
	.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')
	.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')
	.selectAll('.errbars')
	.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>