jquery - 在用户输入时突出显示 d3.js 元素的选择

Question

我有这个代码：http jsfiddle: //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/

这里的主要变化是：

1. 将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; }
       })
   

2. selectAllrect.small然后更新适当的fill矩形，同时重置highlight所有其他rect.small：

   d3.selectAll("rect.small").attr('fill', function (d) { return d === +val ? 'green' : 'grey'; });