- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试使用nodejs、jsdom 和 d3 v4 组装和托管 svg。我写了一个updated version的this example因为它没有按原样工作。但是,我必须手动设置结束 svg 标签,因为我不知道如何使用 d3 在 svg 主体内添加路径。
如何使用 d3 在 svg 内的示例中附加最后一个路径?
更新1
此部分来自 updated version设法构建 svg 的主要部分。附加所有内容后,第二部分尝试添加路径数据失败,因为数据附加到结束 svg 标记之外:
var document = jsdom.jsdom();
var svg = d3.select(document.body)
svg.append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
.attr('width', width + pad.l + pad.r)
.attr('height', height + pad.t + pad.b)
.append('g')
.attr('transform', 'translate(' + pad.l + ',' + pad.t + ')')
.append('g')
.attr('class', 'x axis')
.call(xAxis)
.append('g')
.attr('class', 'y axis')
.call(yAxis)
.selectAll('.axis text')
.style('fill', '#888')
.style('font-family', 'Helvetica Neue')
.style('font-size', 11)
.selectAll('.axis line')
.style('stroke', '#eee')
.style('stroke-width', 1)
.selectAll('.domain')
.style('display', 'none')
svg.selectAll('path.samples')
.data([samples])
.enter()
.append('path')
.attr('class', 'samples')
.attr('d', line)
.style('fill', 'none')
.style('stroke', '#c00')
.style('stroke-width', 2)
最佳答案
您必须分开您的选择
var document = jsdom.jsdom();
var body = d3.select(document.body)
var svg = body .append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
.attr('width', width + pad.l + pad.r)
.attr('height', height + pad.t + pad.b)
// now we appending g element to the svg
var g = svg
.append('g')
.attr('transform', 'translate(' + pad.l + ',' + pad.t + ')')
//now we are appending container for x axis inside g
g.append('g')
.attr('class', 'x axis')
.call(xAxis)
//now we are appending container for y axis inside g
g
.append('g')
.attr('class', 'y axis')
.call(yAxis)
// now we are styling appended axis texts inside svg
svg.selectAll('.axis text')
.style('fill', '#888')
.style('font-family', 'Helvetica Neue')
.style('font-size', 11)
// now we are styling all ticks inside svg
svg.selectAll('.axis line')
.style('stroke', '#eee')
.style('stroke-width', 1)
// now we are styling both line inside svg again ()
svg.selectAll('.domain')
.style('display', 'none')
// now we are appending paths to the svg
svg.selectAll('path.samples')
.data([samples]) // if samples is array and you want to bind each element to the path, then [ ] this brackets is redundant here
.enter()
.append('path')
.attr('class', 'samples')
.attr('d', line)
.style('fill', 'none')
.style('stroke', '#c00')
.style('stroke-width', 2)
关于node.js - 如何使用nodejs、d3和jsdom修改基于svg的dom的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45433404/
我对如何使用 jsdom 仍然一头雾水。 jsdom.env() 和 jsdom.jsdom 有什么区别? 最佳答案 The readme file解释说 jsdom.env is built for
我有一个使用 ES2015 模块语法的代码库,即。 从“bar”导入 foo。它也有这样的代码: // setup.js var foo = window.foo || ''; 我想使用 jsdom
有没有一种方法可以将 HTML 传递给 jest 内置 JSDOM 中的构造函数,例如 const dom = new JSDOM('Hello world'); - in orginal JSDOM
我正在使用 mocha 和 jsdom 对 JavaScript 库进行单元测试。库中的一个模块具有不同的行为,具体取决于文档是否准备好。为了测试这种行为,我需要模拟一个尚未完全准备好的文档(即它的
我想开始使用“jsdom”包jsdom:https://github.com/tmpvar/jsdom 我在文档中看到以下代码片段: var jsdom = require("jsdom"); jsd
Background 因此,我一直在遵循教程来了解 JS 测试框架,并了解到要测试 Web UI,最好使用 JSDOM 库,因为它不需要浏览器并带来 DOM,然后可以以 headless 方式执行。
我正在尝试使用 jsdom 来分析一些 html 内容。我看到的示例使用基于 html 内容的 jsdom.jsdom 文档的 .createWindow() 方法。 但是当我尝试按照这些示例进行操作
我正在尝试使用 Ember、Brunch 和 JSDom 进行 headless 测试。我正在使用 ember-brunch-skeleton 生成应用程序。 https://github.com/f
我已经安装了webppl-agents库(以及 webppl 和 webppl-dp )并尝试运行命令行测试,但我遇到了一些麻烦。 npm 文件模块 (1) 中的 jsdom 似乎存在依赖性问题(2)
在 express.js 中使用 jsdom.jsdom() 我创建了一个带有一些“基本”布局标记的文档,并将一些客户端库(例如 jQuery)附加到其窗口。 只需进行一次此设置就好了。 问题是窗口文
我创建了一个非常简单的页面,仅显示一条消息,因为我正在尝试测试 JSDOM 以使用 document。但是,我收到以下错误。 首先,我在网上看到了无数的例子,除了Stack Overflow上发布的问
这个问题已经有答案了: What do querySelectorAll and getElementsBy* methods return? (12 个回答) 已关闭 4 年前。 我正在尝试使用 T
根据JSDom README ,您可以传递一个 Javascript 字符串数组来执行,但似乎此功能对我不起作用。 这是我的 Node 应用程序: var fs = require('fs'); va
我正在使用 jsdom解析html const data = dom.window.document.querySelector('.row h1').textContent 在那种特殊情况下,我的数
所以我尝试用 jsdom 设置 mocha 测试,经过多次调试尝试,我将问题缩小到 jsdom 执行绝对 URL 脚本(例如 http://code.jquery.com/jquery- 2.1.3.
下面是使用 script 参数的 jsdom 代码的最小示例。尽管我尝试过寻找一种引用外部 JS 的方法,但我还是不断收到此消息 ReferenceError: exVar is not define
我似乎无法让 jsdom 执行外部脚本,而且我似乎找不到任何具体示例。当我调用我的测试函数时,我没有收到任何错误,但什么也没有发生。 这是我的代码: var window = jsdom.js
交叉发布自 https://github.com/tmpvar/jsdom/issues#issue/127 我将在第二天左右发布一个最小的测试用例 - 但我想看看是否有其他人遇到同样的问题 - 或者
我正在使用 jsdom 通过我的 Node.js 应用程序加载网页。有时,我没有获得完整的 DOM,因为一些网页使用脚本在 onload 事件被触发后动态加载它们的内容。 jsdom 默认情况下停用这
我正在尝试使用 jsdom 加载本地 HTML 文件,这是代码 var config = { file: "filename", scripts: ["node_modules
我是一名优秀的程序员,十分优秀!