How to set a nvd3 axis to use strings instead of numerical values ?

问题

Instead of numerical values on the x-axis, i want to set my attribute names. I am no Javascript hero. I am using the scatter Chart.

I believe it should be something like :

chart.xAxis.tickFormat(d3.format(String));

and then i can set:

chart.xAxis
  .axisLabel('Attributes').staggerLabels(true).tickValues(["A", "B", "C"]);;

and then set the values:

data[i].values.push({
 x : "A" ,
       y : 29.765957771107,
    size: Math.random(), 
    shape: shapes[j % 6]
     } , ..

How to see my attributes "A", "B", etc on the x-axis ? I browsed the nvd3 source code also but not finding the right API call.

回答1:

You can pass in a format function that returns label. This is an API of d3js.

var x_format = function(num) {
    if (num === 2.3)
        return "A";
    else if (num === 5.6)
        return "B";
    else if (num === 45.2)
        return "C";
};

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(x_format);

Check out this example that I make for scatterplot.

http://vida.io/documents/jSGz9TQEmzwMqQzhs

{(A, 2.3), (B, 5.6), (C, 45.2) }

Update: my answer with fixed value.

Update: hybrid combination between line, bar, scatterplot:

http://vida.io/documents/fN5FjsYaHaJSXEjz7

回答2:

I have the same problem. My simple solution consists in avoiding the code declaring the x axis. In the nvd3 web also there is this solution: see http://nvd3.org/livecode/index.html#codemirrorNav for an example.

回答3:

Rotating a bar chart into a column chart largely involves swapping x with y. However, a number of smaller incidental changes are also required. This is the cost of working directly with SVG rather than using a high-level visualization grammar like ggplot2 On the other hand, SVG offers greater customizability; and SVG is a web standard, so we can use the browser’s developer tools like the element inspector, and use SVG for things beyond visualization.

When renaming the x scale to the y scale, the range becomes [height, 0] rather than [0, width]. This is because the origin of SVG’s coordinate system is in the top-left corner. We want the zero-value to be positioned at the bottom of the chart, rather than the top. Likewise this means that we need to position the bar rects by setting the "y" and "height" attributes, whereas before we only needed to set "width". (The default value of the "x" attribute is zero, and the old bars were left-aligned.)

var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.range([0, 1, 2, 3, 4, 5]);

It would be tedious to enumerate the positions of each bar by hand, so instead we can convert a continuous range into a discrete set of values using rangeBands or rangePoints. The rangeBands method computes range values so as to divide the chart area into evenly-spaced, evenly-sized bands, as in a bar chart. The similar rangePoints method computes evenly-spaced range values as in a scatterplot.

For example:

 var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.rangeBands([0, width]);

For more information Click http://bost.ocks.org/mike/bar/3/

来源：https://stackoverflow.com/questions/18648565/how-to-set-a-nvd3-axis-to-use-strings-instead-of-numerical-values

标签

javascript

d3.js

nvd3.js