TOGOUTECH

javascript - 带序号的 nvd3 散点图

coder 2024-07-30 原文

我是 d3 和 nvd3 的新手，想创建一个简单的散点图，就像 example但带有 ordinal y 轴。所以 y 轴值是分类字符串。这是我认为我需要做的:

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(极值)处绘制了一些圆圈。

为了手动强制正确的 cy 值，我尝试在调用后添加(图表):

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

但是还是一样的错误。如何使序数比例正常工作？请注意，当我使用 nvd3 图例在数据系列(将包含不同的 x/y 数据)之间切换时，我还需要它正确更新。

有一个related question在github上，但没有解决方案。

更新:经过一些调试后，我尝试将 chart.yAxis.scale(ys) 替换为 chart.scatter.y(ys) 并且这摆脱了错误。我也可以删除手动 selectAll。

但是，y 轴仍然显示 0.99-1.01 的线性刻度，所有点都绘制在 y=1 处。所以更近了一步，但还没有序数尺度。

最佳答案

万一其他人偶然发现了这个，这对我有用:我没有尝试在轴上强制使用序数刻度(在我的例子中是 X)，而是使用了线性刻度，但提供了一个自定义的 tickFormat 函数，该函数返回所需的标签。 

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

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

关于javascript - 带序号的 nvd3 散点图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17296938/

javascriptnvd3codesection34d3.jsscatter-plotnvd3.jsordinal

有关javascript - 带序号的 nvd3 散点图的更多相关文章

  1. javascript - 需要使用 Browserify 和 browserify-rails 的 sprockets 预处理文件 - 2

    我正在使用browserify-rails我正在尝试让sprockets预处理包含sprockets指令的文件，这样当我使用browserifyrequire()它时，它将包含生成的JavaScript。sprockets指令尝试包含gemjs-routes的输出，以便让我从客户端访问Rails路由。这是我的设置(在app/assets/javascripts中):system/rails_routes.jsapplication.jsapplication.js是主文件，它运行应用程序的其余部分。我希望能够做类似的事情varrr=require("./system/rails_rou

  2. javascript - 警告 : Tried to load angular more than once. ..因为 jQuery...为什么？ - 2

    我想了解这里发生了什么。警告是不言自明的，我意识到在应用程序中，使用下面的代码和结构，它会运行ng-view两次('test'将在控制台中记录两次，所以Angular当然会加载两次!)....但为什么？我已经阅读了所有我能找到的关于它的帖子，它似乎归结为在angular之前加载jQuery。如果我遗漏了jQuery或者如果我在angualr之后加载jQuery(据我所知这不是好的做法)，没问题。我想让jQuery支持某些功能(特别是ui-sortable)。而且，虽然它似乎并没有真正引起任何问题，但我不想让它运行我的ng-view两次。我是不是在结构上做错了什么，或者我是否缺少解决此问

  3. javascript - Bootstrap : Multiple pages (divs) and navbar - 2

    我想使用这个流行的模板:http://getbootstrap.com/examples/navbar/我不想链接到about.htm或contact.htm，此内容应该在模板内(多页/div)。这一定是这个样子:home...about...contact...但是如何从导航标签“链接”到div？这行不通:HomeAboutContact非常感谢! 最佳答案 您需要使用JavaScript和JQuery来执行此操作。有多种方法可以实现这一目标。选项1创建一个index.html，指定一个并将其留空。然后用jQuery加载home.

  4. javascript - 语义 UI 边栏和下拉菜单 - 2

    我正在尝试使用语义ui创建一个简单的webui。我想要一个带有菜单的侧边栏，在某些项目中会有子项目......应该不会那么难吧？http://jsfiddle.net/ycm8ctfx/ExampleMessages如何让子项目在正常页面内容上“飞出”侧边栏？如果您在示例中单击“消息”，将出现菜单(观察底部出现的滚动条)，但由于它们是侧边栏的子项，因此它们显示在侧边栏中。但我希望它们漂浮在正常内容上!我没有通过摆弄z-index来让它工作。 最佳答案 如果侧边栏被配置为使用overlay过渡，它可以通过指定来修复.ui.sideba

  5. javascript - 如何检查是否支持 javascript 类型的数组？ - 2

    想用javascript测试如果浏览器支持类型化数组http://caniuse.com/#feat=typedarrays我试过了，但似乎不是好方法，因为有些浏览器只提供部分支持..:if(window.ArrayBuffer){alert('typedarraysupported')} 最佳答案 似乎有些浏览器(IE10)不支持Uint8ClampedArray，如果这是您打算使用的功能，您可以检查一下if('Uint8ClampedArray'inwindow){...如果检查返回false，则不支持类型化数组和/或限定数组。

  6. javascript - 使用 Jasmine 测试异步回调 - 2

    我正在使用Jasmine2.1。我正在尝试使用Jasmine2.1来测试模块。我的模块之一具有异步执行代码的功能。当应用程序完成执行时，我需要测试函数的结果。有没有办法做到这一点？目前，我的模块看起来像这样:varotherModule=require('otherModule');functionMyModule(){}MyModule.prototype.state='';MyModule.prototype.execute=function(callback){try{this.state='Executing';varm=newotherModule.Execute(funct

  7. javascript replaceChild 不起作用 - 2

    我是计算机科学专业的学生，​​我们正在用javascript做练习，练习是:“用ID为“numberFour”且文本为“Mistreatment”的新项目替换项目编号4。”这是我做练习之前的样子:第一:寻找伴侣第二:无聊第三:缺乏服从第四:虐待第五点:寻求伙伴关系然后我写了这段js代码来完成作业:varvier=document.createElement("li");vier.innerHTML="Numberfour:Mistreatment";vier.setAttribute("id","numberFour");varlijst=document.querySelector(

  8. javascript - 如何在 AngularJS 中绑定(bind)自定义事件？ - 2

    我有一个自定义事件core-transitionend(实际上由Polymer触发)，我可以使用document.addEventListener()设置事件处理程序.但在AngularJS中执行此操作的最佳做​​法是什么？或者，我可以在DOM中明确设置一个处理程序，即,但是如何在AngularJS中定义这个函数呢？ 最佳答案 参见thisfiddle，我在这里创建了一个自定义指令，它将事件绑定(bind)到元素，angular.module('HelloApp',[]).directive('customDir',function

  9. javascript - 组合与多重继承有何不同？ - 2

    在某些情况下，提倡组合而不是继承。我看到这种情况在Ruby和Javascript社区中越来越多地发生。组合听起来很像多重继承。我什至在一些Ruby实现的内部读到过，模块组合是带有少量语法糖的多重继承。是一样的吗？如果不是，它与多重继承有何不同？ 最佳答案 这取决于您所说的“多重继承”和“组合”是什么意思。如果组合和继承都只是意味着添加到对象响应的消息列表中，那么它们在定义上是相等的。假设类很简单virtualtables方法，并且语言中的每个对象都是由对类和一些数据的引用定义的。如果对象通过调用与其类关联的方法查找函数来响应消息，并

  10. javascript - AngularJS $http : how to avoid redirect following - 2

    在AngularJS应用程序中，我对服务器url进行$http.post调用。此url的成功响应是30x重定向，我的问题是$http.post严格遵循此重定向并在成功回调中返回最终调用的结果。我想拦截此重定向并手动将用户重定向(更改浏览器url)到最终页面。可能吗？ 最佳答案 根据docs，$http服务是一个核心Angular服务，它通过浏览器的XMLHttpRequest对象或通过JSONP促进与远程HTTP服务器的通信。了解这一点，并了解XMLHttpRequest的规范，拦截重定向可能是不可能的。W3CspecforXMLH

随机推荐