当使用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.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) 我在Chrome 32.0.1700.77自动更新后发现此问题.我可以设置top,left和bottom在绝对定位的输入元件,但是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有什么问题或这是一个浏览器问题?
提前感谢任何见解.
我有一个 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