如何用 d3.js 绘制*简单*线段?

2023-11-26

In the 文档对于 d3.js 我找不到直接的方法来绘制simple两点之间的线段。我能找到的唯一方法是需要为 x 和 y 等创建回调。 Amajor制作时只是画一条简单的线段。

有没有更简单的东西?


最简单的是:

d3.select('svg')
  .append('path')
  .attr({
    d: "M0,0L200,200"
    stroke: '#000'
  });

这还不错:

var simpleLine = d3.svg.line()
d3.select('svg')
  .append('path')
  .attr({
    d: simpleLine([[0,0],[200,200]]),
    stroke: '#000'
  });

仍然....

我不知道这是否更简单,但也许更直接:

d3.select('svg')
  .append('line')
  .attr({
    x1: 0,
    y1: 0,
    x2: 200,
    y2: 200,
    stroke: '#000'
  })

(所有三个示例都从 0,0 到 200,200 画一条线)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何用 d3.js 绘制*简单*线段? 的相关文章

  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge
  • dc lineChart 单击时弹出数据点信息

    我正在尝试检测折线图数据点上的点击 Per this answer dc scatter plot binding onClick event https stackoverflow com a 22772340 1873386 I am
  • Dimple.js - 将数据标签添加到条形图的每个条形

    我使用的是dimple js 它基于d3 js 是否可以向本示例中提到的条形图的每个条形添加数据标签http dimplejs org examples viewer html id bars vertical http dimplejs
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • 如何在 d3.js 中填充 svg 圆圈内的图像

    这是我在 svg 中填充圆圈的代码 var svgContainer d3 select body append svg attr width 1000 attr height 1000 var circles svgContainer s
  • 如何从 mysql 数据库中提取数据并使用 D3.JS 进行可视化?

    我有一个数据库MySQL我想在其中可视化D3 JS 为了做到这一点 首先我想parse中的数据JSON格式 然后编写一个基本代码 从数据库中提取数据并使用D3 JS 我环顾四周 但找不到我想要的东西 因为我是新手D3 JS 我怎样才能做到这
  • 调整发散堆积条形图以使用通用更新模式

    我一直在使用可用的堆积条形图示例here https bl ocks org mbostock b5935342c6d21928111928401e2c8608使用以下代码 var data month Q1 2016 apples 384
  • 如何使用 d3.js 沿 GeoJSON 路径对对象进行动画处理?

    我正在使用 D3 js 从 GeoJSON 文件生成并渲染路径 效果很好 但现在我想沿着该路径为对象设置动画 我知道如何使用 D3 和标准 SVG 来做到这一点 创建过渡并设置其持续时间 对于过渡的每一帧 使用 Complete 查找沿路径
  • 使用 Meteor 中的 D3 访问 csv 文件

    我已经使用 D3 成功渲染了一个 HTML 表格 显示了 csv 文件中的数据 但是当我将相同的代码移入 Meteor 项目时 我遇到了问题 传递到 d3 csv 回调中的数据对象一次拾取 HTML 文件 1 行 而不是 csv 数据 仅当
  • 窗口调整大小事件上的响应式画布

    我是画布概念的新手 我正在尝试使用 D3 js 绘制画布 我想让画布根据窗口屏幕大小进行响应 function onResize var element document getElementsByTagName canvas 0 var
  • nvd3散点图中自定义无数据标签

    我正在尝试使用自定义消息而不是显示的 无可用数据 消息 我正在使用 nvd3 散点图 气泡图 我遇到了一个建议here https stackoverflow com questions 17458236 nvd3 showing empt
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • crossfilter - 计算具有属性的所有记录的百分比

    这是我的问题 我正在使用 python Flask 服务器从 mongo db 获取 json 数据 并在其中指定要导入的字段 此数据采用 json 格式 并且仅像这样获取 一旦通过 graphs js 中的 crossfilter 是否可
  • d3.js - .exit().remove() 组元素不起作用

    我正在构建一个动态条形图 查看肯尼亚和坦桑尼亚男孩和女孩的考试成绩 用户可以从下拉菜单中选择他们想要查看哪个国家 肯尼亚 坦桑尼亚 和哪一年 2010 年 2011 年 的分数 我已清理所有数据并将其组织到单独的国家 地区年份 csv 文件
  • 使用 pandas“to_csv”防止尾随零

    我正在尝试将 CSV 字符串导出到 D3 Web 应用程序 但是命令to csv坚持在数据中添加尾随 0 这会妨碍 D3 的正确使用 这是一个说明问题的最小示例 我的 简化的 数据框是 gt gt gt df pd DataFrame Al
  • d3:力向图:节点过滤

    我正在浏览以下帖子 突出显示选定的节点 https stackoverflow com questions 8739072 highlight selected node its links and its children in a d3
  • 重构代码时无法读取未定义的属性“push”

    我想让这段代码变得更简单 links forEach function link link source nodes link source nodes link source name link source link target no
  • 为 d3.js 中的多个元素生成 ClipPaths

    我正在尝试创建部分填充的圆圈 就像最终的 纽约时报 政治大会可视化中的圆圈一样 http www nytimes com interactive 2012 09 06 us politics convention word counts h
  • 如何为 D3 条形图分配随机颜色?

    我正在根据下面的模型制作 D3 条形图 如何使条形具有随机颜色 jsFiddle http jsfiddle net rdesai MjFgK Code svg append g attr class x axis attr transfo

随机推荐

  • 一台服务器上的多个 Zend 框架站点

    我在设置 httpd conf 或 htaccess 文件以识别一台服务器上的多个 zend 框架站点时遇到问题 对于开发 我只有一台服务器 我正在尝试设置站点 以便我可以访问它们 例如 localhost app1 localhost a
  • python pdb lambda函数全局名称错误

    我正在使用测试修复pdb set trace 在实施之前确保它按照我预期的方式工作 并不断出现奇怪的错误 Pdb test 1 2 3 4 4 3 2 1 Pdb max range len test key lambda i test i
  • 内容解析器返回错误的大小

    我正在从图库中选择一张图像并通过以下方式查询其大小ContentResolverAPI 它返回29kb 但是 当我使用 adb 检查文件时ls al它是 44kb 这是我查询图像大小的方法 private fun getFileInfo c
  • 我们如何在 iOS 应用程序中使用自定义字体? [复制]

    这个问题在这里已经有答案了 可能的重复 我可以在 iPhone 应用程序中嵌入自定义字体吗 如何在 iPhone 应用程序中自定义字体 是否可以 我怎样才能在a中使用这个自定义字体UILabel 我正在尝试添加MYRIADPRO SEMIB
  • 如何使用 OkHttp 设置连接超时

    我正在使用 OkHttp 库开发应用程序 我的麻烦是我找不到如何设置连接超时和套接字超时 OkHttpClient client new OkHttpClient Request request new Request Builder ur
  • Android房间数据库不会导出所有数据

    我正在尝试设置 Room 数据库备份功能 问题是 下载后 sql 数据库文件不包含应用程序中的最新数据集 它总是会错过一些最近的记录 有没有导出房间数据库的正确方法 附 在使用 sqliteHelper 处理我的数据库时 我没有遇到类似的问
  • Delphi XE2后台IDE编译器找不到源路径

    我刚刚购买了 XE2 版本 安装了更新 1 ISO 并制作了我的开源项目用它来编译 In fact 我将库的源代码路径添加到常规设置IDE中 适用于我使用的所有平台 即到目前为止的Windows 32位和64位 我编译了TestSQLite
  • 如何将 Python 3.5 设置为 MacOS 上的默认版本?

    我刚刚在 Mac 上安装了 Python 3 5 1 运行最新版本的 OSX 我的系统安装了 Python 2 7 当我打字时IDLE在终端提示符下 我的系统会启动原始的 Python 2 7 而不是新安装的 Python 3 5 当我从终
  • Parameter.As String 在 Oracle/SQL 下失败 - Parameter.Value 2 字节字符在 Oracle 下

    更改为 FireDAC 后 我无法让此代码在 MSSQL Oracle 上运行 with DataFormsettings do begin Close if Params Count 0 then FetchParams Params P
  • 原因:(noSuchName) 此 MIB 中没有这样的变量名称

    我使用的是centos操作系统 我正在尝试通过以下方式获取本地主机的内存统计信息snmpget命令 我收到此错误 snmpget v 1 c public localhost 1 3 6 1 4 1 2021 4 6 Error in pa
  • Node.js 应该监听哪些端口?如何以及为何?

    我的 Node js 应用程序在端口 80 上监听 http 在端口 443 上监听 https 我认为这是相当标准的做法 然而 我最近读到的一些例子使用其他端口 例如8080和8081 来监听http https 然后使用其他方式 例如i
  • Android - 无法以编程方式删除 Wifi 网络 - WifiManager 类型中的方法 removeNetwork(int) 不适用于参数(字符串)

    我正在尝试以编程方式删除我的 wifi 网络 但是我似乎无法让它删除 忘记当前连接的 wifi 连接 这应该是一个非常简单的任务 所以我不确定我到底做错了什么 我使用以下 StackOverflow 帖子作为示例 如何以编程方式忘记andr
  • Angular6 ngModelChange 中的去抖时间

    我有一个用 Angular6 编写的复杂计算器应用程序 它根据 ngModelChange 事件中的多个输入计算结果 并直接在图表中显示这些结果 计算是在服务器端完成的 现在我想添加一个防抖时间 这样服务器就不会在按下每个键时收到请求 我在
  • 位置:绝对,不设置上/左/下/右?

    Case 1 我想在默认 WordPress 主题的标题中的照片上方放置一个徽标 http twentyelevendemo wordpress com 我的解决办法 在照片前加上logo 然后设置position absolute on
  • Linux 中的 C 头文件中的“_IO(...)”是什么意思?

    我有一个 Linux 标准头文件 例如 usr src linux headers 3 2 0 35 include linux usbdevice fs h 其中包含define声明如下 define USBDEVFS SUBMITURB
  • angularjs:ng-src相当于background-image:url(...)

    在 AngularJS 中你有标签 ng src其目的是在 angularjs 评估放置在两者之间的变量之前 您不会收到无效 url 的错误 and 问题是我使用了相当多的 DIVbackground image设置为一个网址 我这样做是因
  • 错误CS0266:无法将类型“object”隐式转换为“int”

    错误CS0266 无法将类型 object 隐式转换为 int 一个 存在显式转换 您是否缺少强制转换 int dd 6000 sqlCmdDefaultTime new SqlCommand myQuery sqlCon sqlDefau
  • Microsoft Azure 应用服务存储

    I have a doubt for purchase a microsoft azure app service to host my app I have already tested the free profile and i am
  • Android 收据/zigzag 可绘制/布局

    我需要在 Android 中创建收据布局 这个想法非常简单 一个带有锯齿形底部边缘的矩形布局 最好的结果是具有固定锯齿形尺寸的可绘制 布局 即固定的半三角形尺寸 这将根据形状的实际宽度实时乘以三角形的数量 也许可以用夹子 必要时可以剪掉三角
  • 如何用 d3.js 绘制*简单*线段?

    In the 文档对于 d3 js 我找不到直接的方法来绘制simple两点之间的线段 我能找到的唯一方法是需要为 x 和 y 等创建回调 Amajor制作时只是画一条简单的线段 有没有更简单的东西 最简单的是 d3 select svg