Невозможно создать тег html select в svg в d3 - PullRequest
Новая
       25

Невозможно создать тег html select в svg в d3

0 голосов
/ 09 марта 2020

Я пытаюсь создать тег html select, используя d3 v4.

Я могу создать тег select, используя следующее:

index. html 

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <title>Final Project</title>
</head> 

<body>

</body>

<script src="dependencies/d3.js"></script>
<script src="dependencies/d3-scale-chromatic.js"></script>

<script src="index.js"></script>
</html>

index. js

//var animationSvg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");

var data = ["Option 1", "Option 2", "Option 3"];
var select = d3.select("body").append('select')
//var select = animationSvg.append('select')
  .attr("x", "50%")
  .attr("y", "50%")
  .on('change',onchange)

var options = select
  .selectAll('option')
  .data(data).enter()
  .append('option')
    .text(function (d) { return d; });

function onchange() {
  selectValue = d3.select('select').property('value')
  d3.select('body')
    .append('p')
    .text(selectValue + ' is the last selected option.')
};

Однако, если я попытаюсь создать элемент svg в теге html 'body и добавить выбор тег к svg, он не будет работать:

index. js: 

var animationSvg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");

var data = ["Option 1", "Option 2", "Option 3"];
//var select = d3.select("body").append('select')
var select = animationSvg.append('select')
  .attr("x", "50%")
  .attr("y", "50%")
  .on('change',onchange)

var options = select
  .selectAll('option')
  .data(data).enter()
  .append('option')
    .text(function (d) { return d; });

function onchange() {
  selectValue = d3.select('select').property('value')
  d3.select('body')
    .append('p')
    .text(selectValue + ' is the last selected option.')
};

Я, честно говоря, не уверен, почему html выбор тегов не может быть добавлен к элемент d3 svg. Атрибуты x и y, похоже, тоже не работают.

Когда я пытаюсь найти элемент select в документах d3 в https://devdocs.io/d3~4/, это не так. Не показывать, как добавлять текст, круги, выделять элементы и т. д. c.

. Могу предоставить дополнительную информацию по запросу. Спасибо!

...