D3: Не удается добавить простой путь к контейнеру svg

Я не преуспеваю в добавлении пути в простой контейнер svg. Вместо этого он рассматривает мой «путь» как текст.D3: Не удается добавить простой путь к контейнеру 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 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.

спасибо. С уважением.

источник

2017-01-26 Swork

Не используйте jQuery при работе с SVG. Он не предназначен для обработки пространства имен SVG и, вероятно, будет источником многих головных болей. Ниже описывается ваша проблема более подробно: [* «Приложение jquery не работает с элементом svg?» *] (/ Q/3642035). – altocumulus

Это смешение d3, jQuery и vanilla js настолько неудобно и запутанно ... Почему бы вам не создать SVG, используя только d3? –

Как указывалось в комментариях, избегайте смешивания jquery и d3.

Корень ваших проблем, хотя в том, что ваш tracer.$svg является селектором JQuery но вы лечите его как d3 селектор. Хотя оба они имеют метод append, это два совершенно разных зверя (и, как указывает @altocumulus, jquery не играет так красиво, манипулирует SVG).

Вот ваш код, как я написал бы его просто 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>

источник

2017-01-26 12:17:20 Mark

Благодаря Перистые:

jquery's append not working with svg element? ли именно та информация, которую я искал лучше понимание манипулирования DOM (но все же показывает мне, насколько продвижение по интерфейсу может быть неудобным).

Спасибо Херардо Фуртадо:

Действительно, потребность в различных Lib приводит легко странному поведению и делает JS трудно обрабатывать при работе на существующем проекте (как определить пространство имен путем считывания кода, избежать столкновения ...)

я обращался с моей проблемой лишь управлять моим использованием SVG D3, как вы посоветовали:

tracer.$svg = tracer.capsule.$svg = d3.select("#" + tracer.defaultName) 
 
             .append("svg") 
 
             .attr("width", "100%") 
 
             .attr("height", "100%") 
 
             .attr("id", tracer.defaultName + "-svg") 
 
             .attr("class", "svg-d3-table") 
 
             .attr("xmlns", "http://www.w3.org/2000/svg");

Спасибо за ваши комментарии.

источник

2017-01-26 12:56:37 Swork

D3: Не удается добавить простой путь к контейнеру svg

ответ

Смежные вопросы