Question

我在jsfiddle：http://jsfiddle.net/nikunj2512/L6u9x/4/

中有这段代码

我还有一个文本输入和一个提交按钮。我想要实现的是当用户输入svg框中显示的数字时，该编号框应该突出显示。但我知道如何做到这一点。

var w = 100;

var h = 100;

var padding = 5;


var svg = d3.select('#svg1').append('svg')
.attr({
    width: w,
    height: h
});


svg.append('rect')
.attr({
    width: w,
    height: h,
    fill: 'red'
});


var little = svg.selectAll('rect.small')
.data(d3.range(9));


little.enter().append('rect')
.attr({
    width: w / 3 - padding * 2,
    height: h / 3 - padding * 2,
    fill: 'grey',
    x: function(d) { return d % 3 * (w / 3) + padding; },
    y: function(d) { return ~~(d / 3) * (h / 3) + padding; }
})




var text = svg.selectAll("text")
                    .data(d3.range(9))
                    .enter()
                    .append("text");


//Add SVG Text Element Attributes

var textLabels = text
             .attr("x", function(d) { return d % 3 * (w / 3) + padding; })
             .attr("y", function(d) { return ~~(d / 3) * (h / 3)+ padding*5; })
             .text( function (d) { return d; })
             .attr("font-family", "sans-serif")
             .attr("font-size", "20px")
             .attr("fill", "white");


$( "#target" ).submit(function( event ) {

var val = $("input:first").val();



event.preventDefault();

var h = d3.select("rect").datum(val);

console.log(h);

});

请帮帮我。

Answer 1

这个jsfiddle解决了这个问题：http://jsfiddle.net/L6u9x/5/

这里的关键变化是：

将small课程添加到包含这些数字的rect。

little.enter().append('rect')
    .classed('small', true)
    .attr({
        width: w / 3 - padding * 2,
        height: h / 3 - padding * 2,
        fill: 'grey',
        x: function(d) { return d % 3 * (w / 3) + padding; },
        y: function(d) { return ~~(d / 3) * (h / 3) + padding; }
    })

selectAll rect.small然后更新相应矩形的fill，同时为所有其他highlight重置rect.small：
```
d3.selectAll("rect.small").attr('fill', function (d) { return d === +val ? 'green' : 'grey'; });
```

根据用户输入突出显示d3.js元素的选择

1 个答案: