D3：无法将简单路径追加到svg容器

debugcn 发表于 Dev

Hybesis

我没有在简单的svg容器上附加路径。它将我的“路径”元素视为文本。

这是我的代码：

// Create the SVG
var tracer = {};
tracer.$container = document.getElementById('container');

tracer.$svg = $('<svg class="svg-d3-table" style="width:100%; height:100%">');
tracer.$container.append(tracer.$svg);

// Specify the path points
var pathInfo = [{x:0, y:60},
                {x:50, y:110},
                {x:90, y:70},
                {x:140, y:100}];

// Specify the function for generating path data             
var pathLine = d3.line()
                 .x(function(d){return d.x;})
                 .y(function(d){return d.y;})
                 .curve(d3.curveBasis); 

// Append path
tracer.$svg.append("path")
           .attr("d", pathLine(pathInfo))
           .attr("stroke", "white")
           .attr("stroke-width", 8)
           .attr("fill", "none");

而不是使用新的path元素

<path d="M314,352L314,352C314,352,314,352,..."></path>

它带有以下内容：

<svg class="svg-d3-table" style="..." d="M0,60L8.3,68.3.7,...">path</svg>

我想念什么？

PS：抱歉，我来自c ++，在使用一些非常基本的js操作时可能会遇到困难。

非常感谢你。亲切的问候。

标记

正如其他人在评论中指出的那样，请避免将jquery和混合使用d3。

问题的根源是您tracer.$svg是一个jquery选择器，但您将其视为d3选择器。虽然它们都有一个append方法，但是它们是两个完全不同的野兽（正如@altocumulus所指出的那样，jQuery在操纵SVG方面没有起到很好的作用）。

这是您的代码，就像我用just编写的那样d3：

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <div id="container" style="background-color: steelblue"></div>
  <script>
    // Create the SVG
    var tracer = {};
    tracer.$container = d3.select('#container');

    tracer.$svg = tracer.$container.append("svg")
      .attr("class", "svg-d3-table")
      .style("width", "100%")
      .style("height", "100%");

    // Specify the path points
    var pathInfo = [{
      x: 0,
      y: 60
    }, {
      x: 50,
      y: 110
    }, {
      x: 90,
      y: 70
    }, {
      x: 140,
      y: 100
    }];

    // Specify the function for generating path data             
    var pathLine = d3.line()
      .x(function(d) {
        return d.x;
      })
      .y(function(d) {
        return d.y;
      })
      .curve(d3.curveBasis);

    // Append path
    tracer.$svg.append("path")
      .attr("d", pathLine(pathInfo))
      .attr("stroke", "white") //<-- need a color?
      .attr("stroke-width", 8)
      .attr("fill", "none");
  </script>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。