本文介绍了nvd3散点图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! Im相对较新的d3和nvd3,想要创建一个简单的散点图,就像示例,但使用顺序 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 valuesvar 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 valuesvar ys = d3.scale.ordinal() .domain(["this","is","an","ordinal","scale"]) .range(5);// tell nvd3 to use itchart.yAxis.scale(ys);// add to the pagenv.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:690Error: Invalid value for <line> attribute y1="NaN" d3.js:690Error: Invalid value for <line> attribute y2="NaN" d3.js:690Error: Invalid value for <circle> attribute cy="NaN" d3.js:7532Uncaught 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散点图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!