通过选项选择更新SVG

Question

通过选项选择更新SVG

3

我试图在SVG中获取一个文本元素，随着选项的更改更新它。经过搜索，我已经能够在页面的初始加载以及选项更改时看到（在控制台中）选项更改，但是我无法成功地使数字更改。任何帮助将不胜感激。

    <!DOCTYPE html>
    <html>
    <head>
      <title>Dropdown Test</title>
      <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
      <select id="filter">
        <option value="GroupOne">Group One</option>
        <option value="secondTen">Group Two</option>
        <option value="thirdTen">Group Three</option>
      </select>

      <section id='svgCanvas'>
      </section>
      <script>
        var width = 100;
        var height = 100;

        var numberData = [
          {"Number":10,"Group":"GroupOne"},
          {"Number":13,"Group":"GroupTwo"},
          {"Number":6,"Group":"GroupThree"},
        ];

        var canvas = d3.select("#svgCanvas")
          .append('svg')
          .attr('height',height)
          .attr('width',width);

        function filterData(filterCriteria) {
            console.log(filterCriteria);

            var svgNumber = canvas.selectAll('text')
              .data(numberData);

            svgNumber.enter()
              .append('text')
              .filter(function(d){return d.Group == filterCriteria;})
              .text(function(d){return d.Number;})
              .attr('x',10)
              .attr('y',30)
              .attr('fill','#000000')
              .attr('id','numberText');

            svgNumber.exit().remove();
        };

        filterData('GroupOne');

        d3.select("#filter")
          .on('change', function() {
            var filter = d3.select(this).property('value');
            filterData(filter);
            console.log(filter);
          });
      </script>
    </body>
    </html>

- user7656032

var filter = this.value - Gerardo Furtado

你是指在“.on('change'....”函数中吗？问题似乎不在这里，因为当调用filterData(filter)函数时，控制台记录了正确的值。 - user7656032

抱歉，当我看到“我一直没有成功获取数字”时，我认为你的问题是获取输入值，而不是更改文本元素。我刚刚写了一个答案。 - Gerardo Furtado

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Gerardo Furtado · Accepted Answer

你需要进行一些更改：

你的选项值与数据数组不匹配；
将过滤器应用于数据本身；
由于这是D3 v4，合并选择（从第二次开始，“enter”选择始终为空）。

以下是可工作的代码：

var width = 100;
var height = 100;

var numberData = [{
    "Number": 10,
    "Group": "GroupOne"
}, {
    "Number": 13,
    "Group": "GroupTwo"
}, {
    "Number": 6,
    "Group": "GroupThree"
}, ];

var canvas = d3.select("#svgCanvas")
    .append('svg')
    .attr('height', height)
    .attr('width', width);

function filterData(filterCriteria) {

    var svgNumber = canvas.selectAll('text')
        .data(numberData.filter(function(d) {
            return d.Group == filterCriteria;
        }));

    svgNumber.exit().remove();

    svgNumber.enter()
        .append('text')
        .attr('x', 10)
        .attr('y', 30)
        .attr('fill', '#000000')
        .attr('id', 'numberText')
        .merge(svgNumber)
        .text(function(d) {
            return d.Number;
        });

};

filterData('GroupOne');

d3.select("#filter")
    .on('change', function() {
        var filter = d3.select(this).property('value');
        //or just--> var filter = this.value;
        filterData(filter);
    });

<script src="https://d3js.org/d3.v4.min.js"></script>
<select id="filter">
    <option value="GroupOne">Group One</option>
    <option value="GroupTwo">Group Two</option>
    <option value="GroupThree">Group Three</option>
</select>
<section id='svgCanvas'>
</section>