通过选项选择更新SVG [英] Updating SVG via Option selection
本文介绍了通过选项选择更新SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在一个SVG中获得一个文本元素来更新一个选项更改。搜索完成后，我可以到达可以看到（在控制台中）在页面的初始加载中选项更改的位置，以及选项更改时的位置，但我一直没有成功修改数字。任何帮助，将不胜感激。
<！DOCTYPE html>
< html>
< head>
< title>下拉式测试< / 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>第二组< / option>
< option value =thirdTen>第三组< / 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 （ '宽度'，宽度）;
函数filterData（filterCriteria）{
console.log（filterCriteria）;
var svgNumber = canvas.selectAll（'text'）
.data（numberData）;
$ b $ svgNumber.enter（）
.append（'text'）
.filter（function（d）{return d.Group == filterCriteria;}）
.text（function（d）{return d.Number;}）
.attr（'x'，10）
.attr（'y'，30）
.attr '，'＃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>
解决方案
您需要进行一些更改：
- 您的选项值与您的数据数组不匹配
- 将过滤器应用于数据本身; >
- 由于这是D3 v4，
合并选择（从第二次开始，您的输入选项始终为空）。 >
以下是工作代码：
var width = 100; var height = 100; var numberData = [{Number：10，Group：GroupOne}，{Number：13， ：GroupTwo}，{Number：6，Group：GroupThree}，]; var canvas = d3.select（＃svgCanvas）.append（'svg'）.attr（'height' ，height）.attr（'width'，width）;函数filterData（filterCriteria）{var svgNumber = canvas.selectAll（' （data）.filter（function（d）{return d.Group == filterCriteria; }））; svgNumber.exit（）除去（）; 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>
I am trying to get a text element within an SVG to update with an Option change. After searching, I have been able to get to where I can see (in console) the option change within the initial load of the page, and when the option changes, but I have been unsuccessful with getting the number to change. Any help would be appreciated.
<!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>
解决方案
You need some changes:
- Your options' values don't match your data array;
- Apply the filter to the data itself;
- Since this is D3 v4,
mergethe selections (from the second time on, your "enter" selection is always empty).
Here is the working code:
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>
这篇关于通过选项选择更新SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
