0

さまざまな円でプロットを作成しています。各円の位置は固定されていますが、各円のサイズは HTML 入力フィールドを介して個別に変更できます。

入力フィールドに使用されるコードは次のとおりです。

<input type="text" id="size1" class="size" value="" style="width: 30px;">

このデータセットにデータを保存しました：

var dataset = [{name: "circle1", xpos: -413, ypos: 278, color: "black", radius: $('#size1').val(),},
            {name: "circle2", xpos: -161, ypos: 290, color: "black", radius: $('#size2').val(),}];

これは私が円を描く方法です：

function drawCircle () {
            svg.selectAll("circle").remove();
            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("svg:circle")
               .attr("cx", function(d){
                        return xScale(d.xpos);})
               .attr("cy", function(d){
                        return yScale(d.ypos);})
               .attr("r", function (d){            
                        return rScale(d.radius);})                          
               .attr("fill", "rgb(100,0,0)")
               .attr("opacity", "0.7");
        }

最後に、何かが変化したときに円が再び描画されるトリガーを作成します。

$('.size').change(function(){
            radius = $(this).val(); 
            svg.selectAll("circle")
               .transition()
               .duration(750)
               .attr("r", function (d){            
                        return rScale(radius);})
        });

このように、#size1 または #size2 の値を変更すると、両方の円が最後に入力された値で再描画されます。

私の質問は次のとおりです。各サークルが自分の入力フィールドを「聞く」ようにデータセットを更新するにはどうすればよいですか?

4

1 に答える 1

0

複数の入力フィールドがあると仮定します。

フィールドの 1 つを変更したときにできることは、データセットを再作成し、円を再描画することです。

データセットの静的データは、入力の data-attribute に格納できます。

このような：

HTML

<input type="text" id="circle1" class="size" value="" style="width: 30px;" data-circle='{"name": "circle1", "xpos": -161, "ypos": 290, "color": "black" }'>

JavaScript

function drawCircles (dataset) {
        svg.selectAll("circle").remove();
        svg.selectAll("circle")
           .data(dataset)
           .enter()
           .append("svg:circle")
           .attr("cx", function(d){
                    return xScale(d.xpos);})
           .attr("cy", function(d){
                    return yScale(d.ypos);})
           .attr("r", function (d){            
                    return rScale(d.radius);})                          
           .attr("fill", "rgb(100,0,0)")
           .attr("opacity", "0.7");
    }

$('.size').change(function(){
        var dataset = [];
        $('.size').each(function(index,item) {
          var circleData = item.data('circle');
          var circleData['radius'] = $(item).val();
          dataset.push(circleData);
        });
        drawCircles(dataset);
    });
于 2012-10-31T17:32:04.467 に答える