javascript - D3 Javascript - 示例 SVG 在 HTML 中声明，无法嵌入 HTML 标签

Question

Stackoverflow 世界。需要一些指导。我正在开发一个 D3 JS 脚本，它将嵌入到一个打包的应用程序中，该应用程序不允许在编辑器中使用任何 native HTML 代码 - 仅限 JS/JQ。我在 Bostock 的 Blocks ( https://bl.ocks.org/mbostock/4063550 ) 上发现了一个很棒的可视化(请查看示例以了解完整的单个 HTML 页面用法 - 我使用内联 JSON 对其进行了修改以进行测试)。在调整代码以增强入站 JSON block 之后，我注意到在代码的头部，初始 SVG 在 Javascript block 之前被调用。这对我不起作用。无论我尝试什么，我似乎都无法使实例化 SVG 的典型方法发挥作用。以下是首次引用 SVG 的方式:

{<svg width="960" height="1060"></svg>}

与许多其他 block 示例不同，稍后可以直接操作 SVG

var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");

我发现的所有示例都是这样的(无论我如何尝试匹配它(当然删除“svg”标签之后，它都不起作用。

)

这是我多次看到的方式，并且我在我的非工作 JS Fiddle 中应用了该框架。:

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

我尝试通过 D3 重新创建“svg”标签，但它似乎从未起作用。

这是一个 JSFiddle，它按照编写的方式工作(带有“svg”html 标签):

https://jsfiddle.net/LtL6yu5a/4/

这是一个 JSFiddle，它像我需要的那样存在(但不工作):

https://jsfiddle.net/bhj9gds1/

提示、指示，任何事情都会有帮助。对我来说，这个问题似乎与组或“g”项有关。

Answer 1

它当前不起作用的原因是您的代码中没有声明 g 并且稍后会引用它。

相反，您可以简单地这样做:

//declare width and height for your svg
var width = 960
var height = 1000;

//append a svg element to the body with the width and height declared above
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

//append g element to svg and set it equal to a var called "g"
var g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");

JSFiddle - https://jsfiddle.net/0uxeywn5/