Question

我有一个最小的d3折线图示例，希望将其替换为普通js选择器的d3选择器。
下面显示了我的尝试，在我的普通js版本下面注释了工作的d3代码。它确实成功创建了所有预期的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元素：

[[NSFileManager defaultManager] removeItemAtURL: ...]

如果将其放入您的代码块中，我们应该成功绘制图形：

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));

在D3.js中使用香草JS选择器

1 个答案: