javascript - 如何使用 d3 .ticks 在条形图中显示原始 y 轴值

Question

我有一些金额(以美元为单位)，在 y 轴上显示，在 x 轴上显示年份。现在，我想在 y 轴上显示原始数字，但无法做到。

我的意思是在 y 轴上我想显示从 1 到 100000 的数字作为金额，但现在，使用 .ticks(10) 我只能在 y 轴上使用 0 到 8000 之间的金额。

还有一件事，如果我想在 x 轴上将名称显示为字符串，那么我该如何显示，请告诉我。我被困在这里，最近又遇到了 d3。

function test() {

var graph_data;

// in graph_data it should contain value like this 
//  [Object { letter="2011", frequency="10000"}, 
//  Object { letter="2012", frequency="8200"}]

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, 110], .3);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickPadding(10)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .tickPadding(3)
    .orient("left")
    .ticks(10);

var svg = d3.select("#award_by_year_chart").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 + ")");

  x.domain(graph_data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(graph_data, function(d) { return d.frequency; })]);

   svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  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")
    .text("Total dollar");

  svg.selectAll(".bar")
    .data(graph_data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); });

  function type(d) {
    d.frequency = +d.frequency;
    return d;
  }
 }

现在，该代码的工作原理如下图所示。我想根据美元总值(value)更改 y 轴的值，它来自表格，它也可以 -ve 以及 +ve 和上限不固定。那么如何解决。

请给我有值(value)的解决方案。

谢谢

Answer 1

好的，根据我对你问题的理解，我得到的是:

i mean on y axis i want to show number from 1 to 100000 as amount but now, with .ticks(10) i can only used between 0 to 8000 amount at y axis.

为此我会查看 https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues ，它记录了函数 tickValues。这样您就可以准确指定要在 y 轴上显示的内容。假设您只想显示 0 和 100000，那么您可以简单地传递数组 [0, 10000]。

and one more thing that if i want to show name as string at x axis then how can i show please let me know. i am stuck here and newly with d3.

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    .selectAll('text')
    .text(function(d) {
        return 'Some string: ' + d.letter
     })

这将允许您自定义 x 轴上的任何刻度值。如果我不明白问题的第一部分，您还可以在 y 轴上使用此技巧来自定义刻度值的输出。