nvd3散点图 [英] nvd3 scatter plot with ordinal scale

问题描述

Im相对较新的d3和nvd3，想要创建一个简单的散点图，就像示例，但使用< a href =https://github.com/mbostock/d3/wiki/Ordinal-Scales>顺序 y轴。因此y轴值是分类字符串。这是我想我需要做的：

Im relatively new to d3 and nvd3 and wanted to create a simple scatterplot, just like the example but with an ordinal y-axis. So y axis values are categorical strings. This is what I thought I needed to do:

var xfun = function (d) { return d.Pos }    //simple ints
  , yfun = function (d) { return d.Title }  //the ordinal values

var chart = nv.models.scatterChart()
    .showDistX(true)
    .showDistY(true)
    .color(d3.scale.category10().range())
    .margin({ top: 30, right: 20, bottom: 50, left: 130 })
    .tooltips(false)
    .x(xfun)   
    .y(yfun);

// create an ordinal scale with some test values
var ys = d3.scale.ordinal()
    .domain(["this","is","an","ordinal","scale"])
    .range(5);

// tell nvd3 to use it
chart.yAxis.scale(ys);

// add to the page
nv.addGraph(function () {
    d3.select(selector).datum(data).transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

但是，没有运气：

Error: Invalid value for <circle> attribute cy="NaN" d3.js:690
Error: Invalid value for <line> attribute y1="NaN" d3.js:690
Error: Invalid value for <line> attribute y2="NaN" d3.js:690
Error: Invalid value for <circle> attribute cy="NaN" d3.js:7532
Uncaught TypeError: Cannot read property '0' of undefined 
..

y轴简单地显示从-1到1的线性轴。令人惊讶的是，在y = -1和y = 1（极值）处绘制了一些圆。

And the y-axis simply shows a linear axis from -1 to 1. Iterestingly there are some circles plotted at y=-1 and y=1 (the extremes).

要手动强制正确的值cy我试图添加后调用（图表）：

To manually force correct values for cy I tried adding after call(chart):

d3.selectAll("#mychart circle").attr("cy", function(d){
        return = ys(yfun(d));
        });

但仍然有同样的错误。如何使序数值正常工作？注意，当我使用nvd3图例在数据区之间切换时，我也需要它正确更新（它将包含不同的x / y数据）。

But still the same error. How do I get the ordinal scale to work properly? Note I also need it to update correctly when I use the nvd3 legend to switch between dataseries (which will contain different x/y data).

有一个在github上的相关问题，但没有解决方案。

There is a related question on github, but no solution.

更新：在一些调试后，我尝试用 chart.yAxis.scale（ys） > chart.scatter.y（ys），这会消除错误。我也可以删除手册 selectAll 。

Update: after some debugging I tried replacing chart.yAxis.scale(ys) with chart.scatter.y(ys) and this gets rid of the errors. I can also drop the manual selectAll.

但是，y轴仍然显示从0.99- 1.01，所有点在y = 1处绘制。

However, the y-axis still shows a linear scale from 0.99-1.01 and all points are plotted at y=1. So a step closer but no ordinal scale yet.

推荐答案

如果有人绊倒了这里，这对我有用（X，在我的情况下），我使用了一个线性刻度，但提供了一个自定义的tickFormat函数，返回所需的标签。

In case somebody else stumbles upon this, here's what worked for me: instead of trying to force an ordinal scale on the axis (X, in my case), I used a linear scale, but provided a custom tickFormat function that returned the desired label.

chart.xAxis.tickFormat(function(d){
            return labelValues[d];
        });

其中labelValues映射数值和所需标签之间。

Where labelValues maps between the numerical value and the desired label.

这篇关于nvd3散点图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！