小编t.8*_*888的帖子

d3.scale.category10()的行为不符合预期

当使用d3.scale.category10()生成10种固定颜色时,我遇到了意外的行为.

从开始,我注意到colors.range()返回一个正确排序颜色的数组,根据文档.

var colors = d3.scale.category10();
console.log(colors.range());
// -> ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] 
Run Code Online (Sandbox Code Playgroud)

我的期望是调用颜色(0)将始终返回第0个项目,颜色(1)将返回第一个,依此类推.然而我所观察到的是,如果我第一次调用colors(1),则返回第0个项而不是从该点开始的第一个项.随后调用colors(0)将返回第一个项而不是第0个.因此,似乎返回值绑定到使用索引的顺序,而不是自然顺序.

这是一个小提琴:http://jsfiddle.net/LqHst/

为了解决这个问题,我只是通过一个循环来按正确的顺序触摸所有颜色.

for(var i = 0; i < 10; i++) {
  colors(i);
}
Run Code Online (Sandbox Code Playgroud)

要么我误解了它应该如何工作,要么我对我的错误使用视而不见.我之前使用过这个功能并且记得遇到了预期的行为,所以我认为我只是做错了什么或做出了错误的假设.

d3.js

24
推荐指数
2
解决办法
2万
查看次数

变换后获取D3节点的屏幕位置

我试图在d3.behavior.zoom()转换布局后获取节点的屏幕位置,但我没有太多运气.在翻译和缩放布局后,我如何才能在窗口中获取节点的实际位置?

mouseOver = function(node) {
  screenX = magic(node.x); // Need a magic function to transform node
  screenY = magic(node.y); // positions into screen coordinates.
};
Run Code Online (Sandbox Code Playgroud)

任何指导将不胜感激.

编辑:上面的'node'是一个强制布局节点,因此它的x和y属性由模拟设置,并在模拟停止后保持不变,无论应用何种类型的变换.

编辑:我用来转换SVG的策略来自d3的缩放行为,这里概述了:SVG Geometric Zooming.

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("g");

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", function(d) { return "translate(" + d + ")"; });

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); …
Run Code Online (Sandbox Code Playgroud)

position transform zoom d3.js

18
推荐指数
2
解决办法
3万
查看次数

Chrome CSS问题与相对父母内部的绝对定位输入元素(Chrome 32.0.1700.77)右:0无法正常工作

我在Chrome 32.0.1700.77自动更新后发现此问题.我可以设置top,leftbottom在绝对定位的输入元件,但是right: 0被忽略.这是我的代码:

<div id="content">
    <input type="search"/>
</div>

#content {
    position: relative;
    top: 24px;
    height: 24px;
    background-color: gray;
}

#content input[type="search"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* width 100%; */
}
Run Code Online (Sandbox Code Playgroud)

小提琴:http://jsfiddle.net/hAuSL/4/

它在更新之前按预期工作.我也在Firefox(26.0)中看到了这个问题,但在Opera(18.0.1284.68)或Safari(7.0.1(9537.73.11))中没有看到这个问题.

我可以通过添加width: 100%输入元素样式来解决它; 但我想知道,CSS有什么问题或这是一个浏览器问题?

提前感谢任何见解.

css google-chrome

6
推荐指数
1
解决办法
6381
查看次数

Javascript 类未在 Visual Studio Code 中获取 TypeScript 声明文件

我有一个 Typescript/JavaScript 混合项目,我正在d.ts为一些 JavaScript 文件创建声明文件,以帮助管理多个类和子类。

但是,Visual Studio Code 看不到声明的类型。我在同一目录中有js相应的d.ts文件。

例如:

我的类.js

class MyClass {
  constructor(options) {}

  action(num) {
    return num.toString()
  }
}
Run Code Online (Sandbox Code Playgroud)

}

我的班级.d.ts

export interface Options {
  a: boolean
  b: boolean
}

export declare abstract class MyClass {
  constructor(options: Options)
  action(num: number): string
}
Run Code Online (Sandbox Code Playgroud)

IntelliSense不拿起定义,例如,当我将鼠标悬停在action的方法my-class.js

在此处输入图片说明

我试过在顶部添加一个参考注释,但my-class.js没有效果 ( ///<reference path="./my-class.d.ts" />)。

我在我的设置中设置了checkJs选项true

我正在使用 VS Code 版本 1.19.1

我是否需要采取其他措施才能使其发挥作用?

javascript commonjs typescript visual-studio-code typescript-declarations

5
推荐指数
1
解决办法
2125
查看次数