0

私はこのコードを次の場所に持っています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);

});

私を助けてください。

4

1 に答える 1

0

この 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をリセットします。highlightrect.small

    d3.selectAll("rect.small").attr('fill', function (d) { return d === +val ? 'green' : 'grey'; });
于 2013-10-28T12:58:49.517 に答える