Использование ванильных селекторов JS с D3.js

Question

У меня есть пример минимальной линейной диаграммы d3, на котором я хотел бы заменить селекторы d3 для селекторов vanilla js.
Ниже показана моя попытка с рабочим кодом d3, закомментированным ниже моей версии vanilla js. Он успешно создает все ожидаемые элементы SVG, но они не отображаются на экране должным образом, поэтому нет диаграммы.

const data = [
  { date: "Wed, 14 Aug 2019 00:00:00 GMT", close: 2.9254177545691844 },
  { date: "Wed, 28 Aug 2019 00:00:00 GMT", close: 2.8956143512450847 },
  { date: "Fri, 30 Aug 2019 00:00:00 GMT", close: 2.8878846468949795 },
  { date: "Mon, 02 Sep 2019 00:00:00 GMT", close: 2.893494826736734 },
];
data.forEach(d => (d.date = new Date(d.date)));

const margin = { top: 30, right: 30, bottom: 50, left: 50 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

// set the ranges
const x = d3
  .scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width]);
const y = d3
  .scaleLinear()
  .domain(d3.extent(data, d => d.close))
  .range([height, 0]);

// create line generator
const valueline = d3
  .line()
  .x(d => x(d.date))
  .y(d => y(d.close));

// add svg and g with vanilla js
const body = document.querySelector("body");
const svg = document.createElement("svg");
svg.setAttribute("width", width + margin.left + margin.right);
svg.setAttribute("height", height + margin.top + margin.bottom);
const g = document.createElement("g");
g.setAttribute("transform", `translate(${margin.left},${margin.top})`);
svg.appendChild(g);
body.appendChild(svg);

// add svg and g with d3
// d3.select("body")
//   .append("svg")
//   .attr("width", width + margin.left + margin.right)
//   .attr("height", height + margin.top + margin.bottom)
//   .append("g")
//   .attr("transform", `translate(${margin.left},${margin.top})`);

// Add lines
const g2 = d3.select("g");
g2.append("path")
  .data([data])
  .attr("d", valueline)
  .attr("stroke", "red")
  .attr("fill", "none");

// Add the Axes
g2.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x));
g2.append("g").call(d3.axisLeft(y));

Answer 1

Вам нужно будет указать пространство имен, так как пространство имен SVG отличается от HTML. Нам нужно использовать document.createElementNS для создания элементов SVG:

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

Если мы поместим это в ваш блок кода, мы должны успешно нарисовать график:

const data = [
  { date: "Wed, 14 Aug 2019 00:00:00 GMT", close: 2.9254177545691844 },
  { date: "Wed, 28 Aug 2019 00:00:00 GMT", close: 2.8956143512450847 },
  { date: "Fri, 30 Aug 2019 00:00:00 GMT", close: 2.8878846468949795 },
  { date: "Mon, 02 Sep 2019 00:00:00 GMT", close: 2.893494826736734 },
];
data.forEach(d => (d.date = new Date(d.date)));

const margin = { top: 30, right: 30, bottom: 50, left: 50 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

// set the ranges
const x = d3
  .scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width]);
const y = d3
  .scaleLinear()
  .domain(d3.extent(data, d => d.close))
  .range([height, 0]);

// create line generator
const valueline = d3
  .line()
  .x(d => x(d.date))
  .y(d => y(d.close));

// add svg and g with vanilla js
//*
const body = document.querySelector("body");
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute("width", width + margin.left + margin.right);
svg.setAttribute("height", height + margin.top + margin.bottom);
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute("transform", `translate(${margin.left},${margin.top})`);
svg.appendChild(g);
body.appendChild(svg);
//*/
// add svg and g with d3
/*
 d3.select("body")
   .append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", `translate(${margin.left},${margin.top})`);
//*/
// Add lines
const g2 = d3.select("g");
g2.append("path")
  .data([data])
  .attr("d", valueline)
  .attr("stroke", "red")
  .attr("stroke-width",1)
  .attr("fill", "none");

// Add the Axes
g2.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x));
g2.append("g").call(d3.axisLeft(y));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>