小编frs*_*hca的帖子

D3.js将对象绑定到数据并附加到每个键

我是D3.js的新手,我正在学习如何玩数据.

假设我有一个名称作为键的对象,每个键都有一个数字数组,如下所示:

var userdata = {
    'John' : [0, 1, 3, 9, 8, 7],
    'Harry': [0, 10, 7, 1, 1, 11],
    'Steve': [3, 1, 4, 4, 4, 17],
    'Adam' : [4, 77, 2, 13, 11, 13]
};
Run Code Online (Sandbox Code Playgroud)

对于每个用户,我想附加一个SVG对象,然后使用该用户的值数组绘制该行.

所以这是我对基于教程的看法的假设,但我知道这是不正确的.这是为了展示我有限的知识并更好地理解我正在做的事情:

首先,我应该创建该行

var line = d3.svg.line().interpolate('basis');
Run Code Online (Sandbox Code Playgroud)

然后我想将数据绑定到我的身体并为每个键附加一个svg元素:

d3.select('body')
    .selectAll('svg')
    .data(userdata)
    .enter()
    .append('svg')
    .append(line)
    .x(function(d, i) { return i; })
    .y(function(d) { return d[i]; });
Run Code Online (Sandbox Code Playgroud)

我接近吗?

javascript d3.js

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

D3.js动画旋转

当我尝试使用D3.js库正确执行旋转动画时,我遇到了麻烦.问题与我想要旋转元素的点有关.

这是我用来表示我的意思(慢动作)的小提琴:http://jsfiddle.net/74mCb/

似乎问题的根源在于:

.attr("transform", "rotate(-60, 150,130)");
Run Code Online (Sandbox Code Playgroud)

然后我像这样旋转它:

.attr("transform", "rotate(40 150,130)");
Run Code Online (Sandbox Code Playgroud)

我希望针的屁股保持在适当的位置(成为旋转的中心),有人可以解释一下我做错了什么吗?

谢谢!

javascript animation transform rotation d3.js

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

Javascript库确定无限期文章

是否存在用于确定名词的不定冠词("a"vs"an")的javascript库?

我可以从一个简单的正则表达式开始,如下所示:

var pattern = /^([aeiou])/i;
pattern.test("umbrella");
Run Code Online (Sandbox Code Playgroud)

但这并不处理这样的情形:"用户",这应该返回false(你不会说" 一个用户点击按钮").

javascript regex string

11
推荐指数
1
解决办法
1980
查看次数

使用比边界尺寸大得多的CSS边界半径

使用border-radius比元素尺寸大得多的问题是否有问题?

例如,如果我想创建一个.circle这样的类:

.circle {
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 1000px;
}
Run Code Online (Sandbox Code Playgroud)

所以现在我可以将这个类应用于任何元素,使其成为一个圆,如下所示:

<img width="80" height="80" alt="My Gravatar" class="circle" src="https://www.gravatar.com/avatar/b262eb4b3bf006cf68ef60eae63ddffc">
Run Code Online (Sandbox Code Playgroud)

我知道到目前为止我还没有遇到任何问题,但是我是否只是为了解决更多问题?

html dom css3 css-shapes

7
推荐指数
1
解决办法
3600
查看次数

Draft.js 插入不可变实体

我一直在使用 Draft.js,但我一直在努力让不可变实体正常工作。

我想在用户单击按钮时插入一个不可变的实体。这是插入实体的函数:

const text = "foo";

const editorState = this.state.value;
const selectionState = editorState.getSelection();
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity("TOKEN", "IMMUTABLE", { time: new Date().getTime() });
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const modifiedContent = Modifier.insertText(contentState, selectionState, text, OrderedSet([ "INSERT" ]), entityKey);
const nextState = EditorState.push( editorState, modifiedContent, editorState.getLastChangeType() );

this.setState({value: nextState}, this.focus );
Run Code Online (Sandbox Code Playgroud)

我在这里有一个工作示例:https : //codepen.io/dakridge/pen/XgLWJQ

好像差不多可以了,但是插入不可变文本后,好像还是可以编辑的,因为继续打字保留了实体的样式。

我究竟做错了什么?有没有更好的方法来做到这一点?我看过这里发布的示例:https : //github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/entity/他们似乎使用了 span 元素。这是首选方法吗?

谢谢大家的帮助!

javascript reactjs draftjs

7
推荐指数
1
解决办法
2032
查看次数

平滑的Javascript mousemove类似于Cubism.js

我很好奇迈克博斯托克是如何能够以如此平滑的方式创建一条跟随鼠标光标的垂直线.如果你看这里http://square.github.com/cubism/,你可以看到我在说什么.

看看我刚刚在这里做的一个简单例子:http://jsfiddle.net/zbfUq/

有很多次我的例子中的线条实际上消失了.他是否正在进行某种位置插值,以便在两个未被记录的点之间创建平滑的平移?如果是这样,任何人都知道如何做这样的事情?

javascript jquery d3.js cubism.js

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

Javascript文件删除和读取目录 - 异步递归

所以我正在尝试创建一个文件管理器Web应用程序.现在,用户可以在屏幕上删除文件,我可以读取它们,包括删除的目录中的所有文件.但是,我不知道脚本何时完成读取文件.

一些代码:

第一个函数处理'drop'事件,并循环遍历每个文件并将其发送到另一个将读取其内容的函数.

function readDrop( evt )
{
    for( var i = 0; i < evt.dataTransfer.files.length; i++)
    {
        var entry = evt.dataTransfer.items[i].webkitGetAsEntry();

        if(entry)
            readContents(entry, "");
    }

    //Do stuff after all files and directories have been read.
}
Run Code Online (Sandbox Code Playgroud)

此函数是递归FileEntry读取器.如果是文件,我会读取FileEntry.如果它是一个目录,它将循环遍历内容并通过该函数传递它.

function readContents(entry, path)
{
    if( entry.isFile )
    {
        readFileData( entry, path, function(fileData)
        {
            _MyFiles.push( fileData );
        });
    }
    else if( entry.isDirectory )
    {
        var directoryReader = entry.createReader();
        var path = path + entry.name;

        directoryReader.readEntries(function(results)
        {
            for( var j = 0; j < …
Run Code Online (Sandbox Code Playgroud)

javascript drag-and-drop html5-filesystem

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