Question

我有一个d3散点图。如果我给x和y轴提供数值，那就很好。但是，如果x轴包含字符串值，则图表中不会显示任何内容。

var data = [[Project1,3], [Project2,17]];

var margin = {top: 20, right: 15, bottom: 60, left: 60}
  , width = 300 - margin.left - margin.right
  , height = 200 - margin.top - margin.bottom;

var x = d3.scale.linear()
          .domain([0, d3.max(data, function(d) { return d[0]; })])
          .range([ 0, width ]);

var y = d3.scale.linear()
          .domain([0, d3.max(data, function(d) { return d[1]; })])
          .range([ height, 0 ]);

var chart = d3.select('#cognitiveChartDiv')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')

var colors = d3.scale.linear()
.domain([5, 20])
.range(['#4577bc','#4577bc'])

var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')   

// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');

main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);

// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');

main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);

var g = main.append("svg:g"); 

g.selectAll("scatter-dots")
  .data(data)
  .enter().append("svg:circle")
      .attr("cx", function (d,i) { return x(d[0]); } )
      .attr("cy", function (d) { return y(d[1]); } )
      .attr("r", 8)
      .style('stroke', function(d,i) {
        return colors(i);
    })
    .style('fill', function(d,i) {
        return colors(i);
    })

如果var data = [[1,10],[2,20]]正常工作。我希望图表也可以用于字符串值。请建议我该怎么做。我尝试使用ordinal()函数代替线性函数，但这无济于事。

Answer 1

“如果x轴标签是字符串值...” 。实际上，轴标签是始终字符串。

您在正文中有一个不同的问题：您也想在数据数组中传递字符串。在这种情况下，您必须更改比例。具体来说，顺序量表：

var x = d3.scale.ordinal()
  .domain(data.map(function(d) {
    return d[0];
  }))
  .rangePoints([0, width], 0.5)

这是您所做的更改的代码：

var data = [
  ["Project1", 3],
  ["Project2", 17]
];

var margin = {
    top: 20,
    right: 15,
    bottom: 60,
    left: 60
  },
  width = 300 - margin.left - margin.right,
  height = 200 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
  .domain(data.map(function(d) {
    return d[0];
  }))
  .rangePoints([0, width], 0.5)

var y = d3.scale.linear()
  .domain([0, d3.max(data, function(d) {
    return d[1];
  })])
  .range([height, 0]);

var chart = d3.select('#cognitiveChartDiv')
  .append('svg:svg')
  .attr('width', width + margin.right + margin.left)
  .attr('height', height + margin.top + margin.bottom)
  .attr('class', 'chart')

var colors = d3.scale.linear()
  .domain([5, 20])
  .range(['#4577bc', '#4577bc'])

var main = chart.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  .attr('width', width)
  .attr('height', height)
  .attr('class', 'main')

// draw the x axis
var xAxis = d3.svg.axis()
  .scale(x)
  .orient('bottom');

main.append('g')
  .attr('transform', 'translate(0,' + height + ')')
  .attr('class', 'main axis date')
  .call(xAxis);

// draw the y axis
var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left');

main.append('g')
  .attr('transform', 'translate(0,0)')
  .attr('class', 'main axis date')
  .call(yAxis);

var g = main.append("svg:g");

g.selectAll("scatter-dots")
  .data(data)
  .enter().append("svg:circle")
  .attr("cx", function(d, i) {
    return x(d[0]);
  })
  .attr("cy", function(d) {
    return y(d[1]);
  })
  .attr("r", 8)
  .style('stroke', function(d, i) {
    return colors(i);
  })
  .style('fill', function(d, i) {
    return colors(i);
  })

.axis path,
.axis line {
  fill: none;
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="cognitiveChartDiv"></div>

如果x轴标签是字符串值，则它们不会显示在d3图表中

1 个答案: