Question

编辑：在Cyril正确解决问题后，我注意到只需将生成轴的函数放在用于生成标签的函数下面就可以解决问题。

我几乎已经阅读了关于D3.js的O＆＃; Reilly书籍教程并在倒数第二页上制作了散点图，但是当添加以下代码来生成我的X轴时我的一半标签消失了：

// Define X Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');
//  Generate our axis
svg.append('g')
    .call(xAxis);

奇怪的是那些不会消失的标签就是我的数据集（[85,21]，[220,88]，[750,150]）中最底层的3对：

var myData = [
                [5, 20],
                ...,
                ...,
                [85, 21],
                [220, 88],
                [750,150]
            ];

这是一张发生了什么的图片，在添加顶部的轴之前，每个点都有红色文字标签：

下面是生成散点图的其余代码，它几乎完全遵循本书中介绍的方法，但我无法确定错误的来源。

// =================
// = SCALED SCATTER GRAPH
// =================
var p = 30; // Padding
var w = 500 + p; // Width
var h = 500 + p; // Height

// SVG Canvas and point selector
var svg = d3.select('body')
    .append('svg')
    .attr('width',w)
    .attr('height',h);

// Scales take an input value from the input domain and return
// a scaled value that corresponds to the output range
// X Scale
var xScale = d3.scale.linear()
    .domain([0, d3.max(myData, function(d){
        return d[0];
    })])
    .range([p, w - (p + p)]); // With padding. Doubled so labels aren't cut off
// Y Scale
var yScale = d3.scale.linear()
    .domain([0, d3.max(myData, function(d){
        return d[1];
    })])
    .range([h - p, p]); // With padding

// Radial scale
var rScale = d3.scale.linear()
    .domain([0, d3.max(myData, function(d){ return d[1];})])
    .range([2,5]);

// Define X Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');
//  Generate our axis
svg.append('g')
    .call(xAxis);

// Plot scaled points
svg.selectAll('circle')
    .data(myData)
    .enter()
    .append('circle')
    .attr('cx', function(d){
        return xScale(d[0]);
    })
    .attr('cy', function(d){
        return yScale(d[1]);
    })
    .attr('r', function(d){
        return rScale(d[1]);
    });

// Plot all labels
svg.selectAll('text')
    .data(myData)
    .enter()
    .append('text')
    .text(function(d){
        return d;
    })
    .attr('x', function(d){
        return xScale(d[0]);
    })
    .attr('y', function(d){
        return yScale(d[1]);
    })
    .style('fill', 'red')
    .style('font-size',12);

js-fiddle：https://jsfiddle.net/z30cqeoo/

Answer 1

问题在于：

  def nonEmptyTextWithError(error: String): Mapping[String] = {
    Forms.text verifying Constraint[String]("constraint.required") { o =>
      if (o == null) Invalid(ValidationError(error)) else if (o.trim.isEmpty) Invalid(ValidationError(error)) else Valid
    }
  }

x轴和y轴使文本元素成为刻度，所以当轴存在时，上面的行将返回刻度数组，因此它解释了为什么它在添加轴时不显示。 / p>

所以正确的方法是做这样的事情：

svg.selectAll('text')

完整的工作代码here。

D3.js：生成X轴会删除我的一些点标签，生成Y轴会将它们全部删除

1 个答案: