Как изменить содержимое dom на основе svg, используя nodejs, d3 и jsdom?

Я пытаюсь собрать и разместить svg, используя nodejs, jsdom и d3 v4. Я написал обновленную версию этот пример, потому что он не работает как есть. Однако мне нужно вручную установить закрывающий тег svg, потому что я не знаю, как добавить путь внутри тела svg с помощью d3.

Как я могу добавить последний путь к примеру внутри svg, используя d3?

ОБНОВЛЕНИЕ 1

Этот раздел из обновленной версии позволяет структурировать основные разделы файла svg. После того, как все добавлено, второй раздел безуспешно пытается добавить данные пути, поскольку данные добавляются за пределы закрывающего тега svg:

var document = jsdom.jsdom();
var svg = d3.select(document.body)

svg.append('svg')
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
    .attr('width', width + pad.l + pad.r)
    .attr('height', height + pad.t + pad.b)
    .append('g')
    .attr('transform', 'translate(' + pad.l + ',' + pad.t + ')')
    .append('g')
    .attr('class', 'x axis')
    .call(xAxis)
    .append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .selectAll('.axis text')
    .style('fill', '#888')
    .style('font-family', 'Helvetica Neue')
    .style('font-size', 11)
    .selectAll('.axis line')
    .style('stroke', '#eee')
    .style('stroke-width', 1)
    .selectAll('.domain')
    .style('display', 'none')

svg.selectAll('path.samples')
    .data([samples])
    .enter()
    .append('path')
    .attr('class', 'samples')
    .attr('d', line)
    .style('fill', 'none')
    .style('stroke', '#c00')
    .style('stroke-width', 2)

node.js svg jsdom d3.js
person JPCF    schedule 01.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны разделить свой выбор

var document = jsdom.jsdom();
var body = d3.select(document.body)

var svg = body .append('svg')
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
    .attr('width', width + pad.l + pad.r)
    .attr('height', height + pad.t + pad.b)

 // now we appending g element to the svg

   var g = svg
        .append('g')
        .attr('transform', 'translate(' + pad.l + ',' + pad.t + ')')

   //now we are appending container for x axis inside g
        g.append('g')
        .attr('class', 'x axis')
        .call(xAxis)

    //now we are appending container for y axis inside g
        g
        .append('g')
        .attr('class', 'y axis')
        .call(yAxis)


  // now we are styling appended axis texts inside svg
        svg.selectAll('.axis text')
        .style('fill', '#888')
        .style('font-family', 'Helvetica Neue')
        .style('font-size', 11)

  // now we are styling all ticks inside svg
        svg.selectAll('.axis line')
        .style('stroke', '#eee')
        .style('stroke-width', 1)

 // now we are styling both line inside svg again ()
        svg.selectAll('.domain')
        .style('display', 'none')


  // now we are appending paths to the svg




    svg.selectAll('path.samples')
        .data([samples])  //  if samples is array and you want to bind each element to the path, then [ ] this brackets is redundant here
        .enter()
        .append('path')
        .attr('class', 'samples')
        .attr('d', line)
        .style('fill', 'none')
        .style('stroke', '#c00')
        .style('stroke-width', 2)
person bumbeishvili    schedule 01.08.2017
comment
У меня это почти работает, но теперь заголовок xml не обрабатывается сервером (т.е. только теги g и т. д. входят в ответ). Мне трудно представить, как это влияет на структуру документа, пока я добавляю что-то... поэтому я теряю представление о том, что происходит... - person JPCF; 01.08.2017