d3 选择集的 XML 命名空间机制详解d3.namespace 与 d3.namespaces【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3在 D3Data-Driven Documents当前仓库版本为 d3 v7.9.0中操作 DOM 时你几乎可以完全忽略 XML 命名空间——只要始终在 HTML 里创建 HTML 元素即可。但一旦你需要在 SVG 内部嵌入 HTML 内容典型场景是foreignObject或者设置带命名空间前缀的属性如xlink:href就必须理解 d3-selection 模块提供的两个命名空间工具d3.namespace和d3.namespaces。本文基于 namespaces.md 展开结合仓库中的文档结构与依赖配置说明这套机制的工作原理、默认值以及扩展方式读完后你能够独立完成 SVG/HTML 混合文档的元素创建、带前缀属性的读写以及为自定义命名空间注册前缀。什么时候需要显式指定命名空间官方文档的态度很明确XML namespaces are fun! Right? Fortunately you can mostly ignore them.——你通常可以忽略它们。少数必须显式指定命名空间的场景是向属于另一个命名空间的父元素追加子元素。最典型的例子是在 SVG 的foreignObject元素中创建一个 HTMLdivd3.create(svg) .append(foreignObject) .attr(width, 300) .attr(height, 100) .append(xhtml:div) .text(Hello, HTML!);这段代码的关键在于最后一行foreignObject属于 SVG 命名空间而div属于 XHTML 命名空间。因此追加元素时必须写成带前缀的xhtml:divd3-selection 才会通过document.createElementNS在正确的命名空间中创建该元素而不是继承父元素的 SVG 命名空间。如果不带前缀直接写.append(div)创建出来的元素会落在错误的命名空间里导致 HTML 内容无法按预期渲染。这一点也解释了为什么 docs/components/PlotRender.js 这类文档渲染辅助代码需要直接封装createElementNS(namespace, tagName)、setAttributeNS(namespace, name, value)和removeAttributeNS(namespace, name, value)等方法——从源码结构看凡是涉及跨命名空间创建与属性操作的场景底层都是围绕这三组 DOM API 展开的。用 d3.create 与 append 跨命名空间创建元素上文示例使用了d3.create这里补充它与append/insert的命名空间语义差异方便对照使用。根据 d3-selection 修改篇 的说明d3.create(name)返回包含一个游离元素的单元素选择集默认假定 HTML 命名空间。因此要创建 SVG 或其他非 HTML 元素时必须显式指定命名空间前缀例如d3.create(svg)svg是已知前缀等价于svg:svg*selection*.append(name)与*selection*.insert(name)中元素名可带命名空间前缀如svg:text表示在 SVG 命名空间中创建text元素若追加的元素不带前缀其命名空间将从父元素继承若名字本身是已知前缀如svg则直接使用对应命名空间。这三条规则与d3.namespace的实现语义是一体的前缀决定创建时使用的createElementNS参数前缀缺失时则走继承路径。d3.namespace解析带前缀的名称d3.namespace(name)用于限定qualify一个可能带命名空间前缀的名称返回描述完整命名空间 URL 与局部名称的对象d3.namespace(svg:text) // {space: http://www.w3.org/2000/svg, local: text}其解析规则为若name中包含冒号:冒号前的子串被解释为命名空间前缀且该前缀必须已注册在d3.namespaces中返回值是包含space完整命名空间 URL与local局部名称两个属性的对象若name不含冒号函数原样返回输入名称——这意味着对普通 HTML 元素名如div做限定是无副作用的。从 CHANGES.md 的历史记录可以确认这套 API 的来源D3 4.0 的大改名中原d3.ns.prefix前缀映射被重命名为d3.namespacesd3.ns.qualify方法被重命名为d3.namespace。也就是说d3.namespace就是早期d3.ns.qualify的后继者负责前缀 → 命名空间 URL的限定工作。在完整的 D3 入口中这两个 API 随d3-selection一并导出src/index.js 中的export * from d3-selection语句将选择集模块的全部符号包括namespace、namespaces平铺到顶层d3对象上这与 package.json 中声明的d3-selection: ^3.0.0依赖一致。d3.namespaces已注册前缀表及其默认值d3.namespaces是一张已注册命名空间前缀的映射表其初始值为{ svg: http://www.w3.org/2000/svg, xhtml: http://www.w3.org/1999/xhtml, xlink: http://www.w3.org/1999/xlink, xml: http://www.w3.org/XML/1998/namespace, xmlns: http://www.w3.org/2000/xmlns/ }各前缀覆盖 Web 平台最常用的命名空间前缀命名空间 URL典型用途svghttp://www.w3.org/2000/svg创建/操作 SVG 图形元素如svg:textxhtmlhttp://www.w3.org/1999/xhtml在foreignObject内创建 HTML 元素如xhtml:divxlinkhttp://www.w3.org/1999/xlink设置 XLink 命名空间属性如xlink:hrefxmlhttp://www.w3.org/XML/1998/namespace操作xml:lang等标准 XML 属性xmlnshttp://www.w3.org/2000/xmlns/处理命名空间声明属性注册自定义前缀文档明确指出Additional prefixes may be assigned as needed to create elements or attributes in other namespaces.——d3.namespaces就是一个普通对象你可以按需往里添加条目来创建或使用其他命名空间的元素和属性// 注册一个新的命名空间前缀示例 URL 请以实际资源为准 d3.namespaces.my http://example.com/my-namespace; // 之后即可使用带前缀的名称 d3.namespace(my:widget); // {space: http://example.com/my-namespace, local: widget}注册后即可在所有依赖d3.namespaces的 API 中使用该前缀包括d3.create、*selection*.append、*selection*.insert创建元素以及*selection*.attr设置带前缀的属性修改篇 中*selection*.attr一节专门举了xlink:href的例子thehrefattribute in the XLink namespace。在 API 索引中的位置在 docs/api.md 的 API 总览中命名空间工具归入 d3-selection 的Namespaces分组共两条d3.namespace—— 限定带前缀的 XML 名称如xlink:hrefd3.namespaces—— 内置 XML 命名空间表。它是 d3-selection 文档 七大主题选择元素、修改元素、数据连接、事件、控制流、局部变量、命名空间之一。与命名空间相关的姊妹文档还有joining.md 的数据连接流程追加/移除元素时的命名空间继承规则在此生效、modifying.md 的属性与元素修改方法以及 control-flow.md、locals.md 等。小结与使用建议日常 HTML 操作不带前缀即可命名空间从父元素继承无需关心d3.namespacesSVG 内嵌 HTML / 混合文档显式使用xhtml:前缀如xhtml:div这是foreignObject场景的标准写法带前缀属性使用xlink:href这类已注册前缀attr方法会通过setAttributeNS落到正确的命名空间第三方命名空间向d3.namespaces对象直接添加前缀 → URL条目d3.namespace与全部创建/设属性 API 随即识别该前缀。整套机制的设计目标是把浏览器createElementNS/setAttributeNS的繁琐细节收敛到一张可注册的映射表后面让你在前缀层面书写代码即可覆盖绝大多数跨命名空间操作。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 d3 选择集的 XML 命名空间机制详解：d3.namespace 与 d3.namespaces
d3 选择集的 XML 命名空间机制详解d3.namespace 与 d3.namespaces【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3在 D3Data-Driven Documents当前仓库版本为 d3 v7.9.0中操作 DOM 时你几乎可以完全忽略 XML 命名空间——只要始终在 HTML 里创建 HTML 元素即可。但一旦你需要在 SVG 内部嵌入 HTML 内容典型场景是foreignObject或者设置带命名空间前缀的属性如xlink:href就必须理解 d3-selection 模块提供的两个命名空间工具d3.namespace和d3.namespaces。本文基于 namespaces.md 展开结合仓库中的文档结构与依赖配置说明这套机制的工作原理、默认值以及扩展方式读完后你能够独立完成 SVG/HTML 混合文档的元素创建、带前缀属性的读写以及为自定义命名空间注册前缀。什么时候需要显式指定命名空间官方文档的态度很明确XML namespaces are fun! Right? Fortunately you can mostly ignore them.——你通常可以忽略它们。少数必须显式指定命名空间的场景是向属于另一个命名空间的父元素追加子元素。最典型的例子是在 SVG 的foreignObject元素中创建一个 HTMLdivd3.create(svg) .append(foreignObject) .attr(width, 300) .attr(height, 100) .append(xhtml:div) .text(Hello, HTML!);这段代码的关键在于最后一行foreignObject属于 SVG 命名空间而div属于 XHTML 命名空间。因此追加元素时必须写成带前缀的xhtml:divd3-selection 才会通过document.createElementNS在正确的命名空间中创建该元素而不是继承父元素的 SVG 命名空间。如果不带前缀直接写.append(div)创建出来的元素会落在错误的命名空间里导致 HTML 内容无法按预期渲染。这一点也解释了为什么 docs/components/PlotRender.js 这类文档渲染辅助代码需要直接封装createElementNS(namespace, tagName)、setAttributeNS(namespace, name, value)和removeAttributeNS(namespace, name, value)等方法——从源码结构看凡是涉及跨命名空间创建与属性操作的场景底层都是围绕这三组 DOM API 展开的。用 d3.create 与 append 跨命名空间创建元素上文示例使用了d3.create这里补充它与append/insert的命名空间语义差异方便对照使用。根据 d3-selection 修改篇 的说明d3.create(name)返回包含一个游离元素的单元素选择集默认假定 HTML 命名空间。因此要创建 SVG 或其他非 HTML 元素时必须显式指定命名空间前缀例如d3.create(svg)svg是已知前缀等价于svg:svg*selection*.append(name)与*selection*.insert(name)中元素名可带命名空间前缀如svg:text表示在 SVG 命名空间中创建text元素若追加的元素不带前缀其命名空间将从父元素继承若名字本身是已知前缀如svg则直接使用对应命名空间。这三条规则与d3.namespace的实现语义是一体的前缀决定创建时使用的createElementNS参数前缀缺失时则走继承路径。d3.namespace解析带前缀的名称d3.namespace(name)用于限定qualify一个可能带命名空间前缀的名称返回描述完整命名空间 URL 与局部名称的对象d3.namespace(svg:text) // {space: http://www.w3.org/2000/svg, local: text}其解析规则为若name中包含冒号:冒号前的子串被解释为命名空间前缀且该前缀必须已注册在d3.namespaces中返回值是包含space完整命名空间 URL与local局部名称两个属性的对象若name不含冒号函数原样返回输入名称——这意味着对普通 HTML 元素名如div做限定是无副作用的。从 CHANGES.md 的历史记录可以确认这套 API 的来源D3 4.0 的大改名中原d3.ns.prefix前缀映射被重命名为d3.namespacesd3.ns.qualify方法被重命名为d3.namespace。也就是说d3.namespace就是早期d3.ns.qualify的后继者负责前缀 → 命名空间 URL的限定工作。在完整的 D3 入口中这两个 API 随d3-selection一并导出src/index.js 中的export * from d3-selection语句将选择集模块的全部符号包括namespace、namespaces平铺到顶层d3对象上这与 package.json 中声明的d3-selection: ^3.0.0依赖一致。d3.namespaces已注册前缀表及其默认值d3.namespaces是一张已注册命名空间前缀的映射表其初始值为{ svg: http://www.w3.org/2000/svg, xhtml: http://www.w3.org/1999/xhtml, xlink: http://www.w3.org/1999/xlink, xml: http://www.w3.org/XML/1998/namespace, xmlns: http://www.w3.org/2000/xmlns/ }各前缀覆盖 Web 平台最常用的命名空间前缀命名空间 URL典型用途svghttp://www.w3.org/2000/svg创建/操作 SVG 图形元素如svg:textxhtmlhttp://www.w3.org/1999/xhtml在foreignObject内创建 HTML 元素如xhtml:divxlinkhttp://www.w3.org/1999/xlink设置 XLink 命名空间属性如xlink:hrefxmlhttp://www.w3.org/XML/1998/namespace操作xml:lang等标准 XML 属性xmlnshttp://www.w3.org/2000/xmlns/处理命名空间声明属性注册自定义前缀文档明确指出Additional prefixes may be assigned as needed to create elements or attributes in other namespaces.——d3.namespaces就是一个普通对象你可以按需往里添加条目来创建或使用其他命名空间的元素和属性// 注册一个新的命名空间前缀示例 URL 请以实际资源为准 d3.namespaces.my http://example.com/my-namespace; // 之后即可使用带前缀的名称 d3.namespace(my:widget); // {space: http://example.com/my-namespace, local: widget}注册后即可在所有依赖d3.namespaces的 API 中使用该前缀包括d3.create、*selection*.append、*selection*.insert创建元素以及*selection*.attr设置带前缀的属性修改篇 中*selection*.attr一节专门举了xlink:href的例子thehrefattribute in the XLink namespace。在 API 索引中的位置在 docs/api.md 的 API 总览中命名空间工具归入 d3-selection 的Namespaces分组共两条d3.namespace—— 限定带前缀的 XML 名称如xlink:hrefd3.namespaces—— 内置 XML 命名空间表。它是 d3-selection 文档 七大主题选择元素、修改元素、数据连接、事件、控制流、局部变量、命名空间之一。与命名空间相关的姊妹文档还有joining.md 的数据连接流程追加/移除元素时的命名空间继承规则在此生效、modifying.md 的属性与元素修改方法以及 control-flow.md、locals.md 等。小结与使用建议日常 HTML 操作不带前缀即可命名空间从父元素继承无需关心d3.namespacesSVG 内嵌 HTML / 混合文档显式使用xhtml:前缀如xhtml:div这是foreignObject场景的标准写法带前缀属性使用xlink:href这类已注册前缀attr方法会通过setAttributeNS落到正确的命名空间第三方命名空间向d3.namespaces对象直接添加前缀 → URL条目d3.namespace与全部创建/设属性 API 随即识别该前缀。整套机制的设计目标是把浏览器createElementNS/setAttributeNS的繁琐细节收敛到一张可注册的映射表后面让你在前缀层面书写代码即可覆盖绝大多数跨命名空间操作。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考