Question

我想将axisBottom值显示为整数，整数之间没有任何内容。在下面的图像中，我使用tickFormat将值切换为整数，但现在我需要只有'1,2,3 ..etc'的值而不是重复的整数值。我需要动态的滴答数生成，意思是我不能静态地说有3个刻度。我传递的数据的最大值可能是3或任何其他数字，但它们都是整数。

数据（JSON）

[ { yAxis: '15.1.1', xAxis: 2 },
  { yAxis: '15.1.2', xAxis: 2 },
  { yAxis: '15.1.3', xAxis: 1 },
  { yAxis: '15.1.4', xAxis: 3 },
  { yAxis: '15.1.5', xAxis: 0 },
  { yAxis: '15.1.6', xAxis: 1 },
  { yAxis: '15.1.7', xAxis: 0 },
  { yAxis: '15.1.8', xAxis: 0 } ]

下面的图片和代码。

var data = !{dataObj};  //using Jade as template engine        
      // set the dimensions and margins of the graph
      var margin = {top: 20, right: 20, bottom: 30, left: 80},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;          
      // set the ranges
      var y = d3.scaleBand()
      .range([height, 0])
      .padding(0.4);
      var x = d3.scaleLinear()
      .range([0, width]);          
      var svg = d3.select(".barChartContainer").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 + ")");
      // format the data
      data.forEach(function(d) {
      d.xAxis = +d.xAxis;
      });
      // Scale the range of the data in the domains
      x.domain([0, d3.max(data, function(d){ return d.xAxis; })])
      y.domain(data.map(function(d) { return d.yAxis; }));
      //y.domain([0, d3.max(data, function(d) { return d.prereqs; })]);
      // append the rectangles for the bar chart
      svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      //.attr("x", function(d) { return x(d.prereqs); })
      .attr("width", function(d) {return x(d.xAxis); } )
      .attr("y", function(d) { return y(d.yAxis); })
      .attr("height", y.bandwidth());
      // add the x Axis
      svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
      // add the y Axis
      svg.append("g")
      .call(d3.axisLeft(y));

Answer 1

这里有两个选择。

第一个只显示整数，但保持刻度。如果数字是tickFormat内的整数：

，则可以测试

.tickFormat(function(d) {
    return d % 1 ? null : d;
});

这是一个演示：

＆＃13;

var svg = d3.select("svg");

var scale = d3.scaleLinear()
  .range([20, 480])
  .domain([0, 3]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d % 1 ? null : d;
  });

var gX = svg.append("g")
  .attr("transform", "translate(0, 50)")
  .call(axis);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

＆＃13;

但是，如果您只想显示整数的刻度，则解决方案是使用tickValues：

.tickValues(d3.range(scale.domain()[0], scale.domain()[1] + 1, 1))

这是一个演示：

＆＃13;

var svg = d3.select("svg");

var scale = d3.scaleLinear()
  .range([20, 480])
  .domain([0, 3]);

var axis = d3.axisBottom(scale)
  .tickValues(d3.range(scale.domain()[0], scale.domain()[1] + 1, 1))
  .tickFormat(function(d) {
    return ~~d;
  });

var gX = svg.append("g")
  .attr("transform", "translate(0, 50)")
  .call(axis);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

＆＃13;

动态地将axisBottom刻度数设置为D3v4中数组中的最高整数

1 个答案: