1

次のコードには、HTML、JavaScript、および SVG が含まれています。SVG でいくつかの機能を作成し、それを HTML 本文に埋め込みました。インタラクティブ機能には JavaScript が使用されており、ユーザーはいくつかの変数を操作してマップ上で結果を確認できます。たとえば、人口を挿入すると、対象都市のシンボルのサイズが変わります。中心が固定されるので、円に問題はありません。長方形のシンボルで都市の人口を変更すると、私の問題が発生します。サイズを変更すると、線上になくなります (長方形の中心が線の交点にある必要があります)。寸法を変更するときに、JSを使用してSVGの長方形（X、Y）の座標を変更しようとしました。しかし、何か問題があります。

<HTML>
<head>

<title>Population</title>

<script language="javascript" type="text/javascript">


var bakaInitPop=100;

var SunnInitPop=5000;


function changeSymbol(){

var initFontSize;
var radius;
var dimention;
var popsize=document.getElementById("population").value;
var svg=document.getElementById("object1");
var cities=document.getElementById("citylist");
var selectedCity=cities.options[cities.options.selectedIndex].value;
var initx1;
var inity1;


if(selectedCity=="Bakalund"){
    var T = svg.getElementById("c");
    radius=T.getAttribute("r");
    T.setAttribute("r",(popsize/bakaInitPop)*radius);
    return bakaInitPop=popsize;
}
else{
    var T = svg.getElementById("rs");
    dimention=T.getAttribute("width");
    initx1 =T.getAttribute("x");
    alert(initx1);
    inity1=T.getAttribute("y");
    var cal =(popsize/SunnInitPop)*dimention;
    alert(cal);
    T.setAttribute("width",cal);
    T.setAttribute("height",cal);
    var newx1 = initx1 +((dimention-cal)/2);
    alert(newx1);
    var newy1 = inity1 +((dimention-cal)/2);
    T.setAttribute("x",newX);
    T.setAttribute("y",newY);
    return SunnInitPop=popsize;
}

}

</script>
</head>
<body>
<form id="form1">
<table width="500" height="400">
<tr>

<td>
<svg id="object1" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="300" height="300" stroke="black" stroke-width="4" fill="white"/>
        <polygon points="10,10 160,160 10,310" stroke="yellow" stroke-width="2" fill="yellow"/>
        <polygon points="10,10 310,310 310,10" stroke="green" stroke-width="2" fill="green"/>
        <polygon points="10,310 310,310 160,160" stroke="green" stroke-width="2" fill="green"/>
        <path d="M160 10 L120 80 L180 160 L170 210" fill="green" stroke="black" stroke-width="2"/>
        <line x1="10" y1="10" x2="310" y2="310" stroke="blue" stroke-width="4"/>
        <g id="bakalund">
        <circle id="c" cx="170" cy="210" r="5" stroke="black" stroke-width="2" fill="red" />
        <text id="c1" x="170" y="230" font-family="Verdana" font-size="10" fill="black" > Bakalund </text>
        </g>
        <g id="sunne">
        <rect id="rs" x="114" y="74" width="12" height="12" stroke="black" stroke-width="2" fill="red"/>
        <text id="rs1" x="130" y="80" font-family="Verdana" font-size="15" fill="black" font-weight="bold"> Sunne </text>
        </g>
    </svg>

</td>
</tr>
<tr>
<td>
<label>City</label>
<select id="citylist">
<option id="0"></option>
<option id="baka">Bakalund</option>
<option id="sunn">Sunne</option>
</select>
</td>
</tr>
<tr>
<td>
<label><b>Population</b></label>
<input type="text" id="population" size="10" maxlength="30"/>
<input type="button" id="set" name="set" value="set" onclick='changeSymbol();'>
</td>
</tr>
</table>
</form>
</body>
</HTML>

デバッグを簡単にするために、実行のさまざまな段階を示す 3 つのアラートを配置しました...3 番目のアラートは 117 のはずですが、1143 になります。これは、最初の x 114 が 10 に乗算され、次に 3 が加算されることを意味します.....

問題: このコードの何が問題なのですか?!!! 問題はテーブルのせいですか?!! プライマリ座標はSVGで定義されているため、テーブルに基づいて座標をどのように適応させることができますか?!!!!

解決：

私はついにそれがなぜ起こるのかを発見しました。これは、X と Y の値が文字列と見なされ、整数に解析してから、次のように新しい値に追加する必要があるためです。

    init1 = parseInt(T.getAttribute("x"));
4

1 に答える 1

2

getAttribute は、数値ではなく文字列を返します。文字列に + 演算子を使用すると、数値に変換して数値を追加するのではなく、連結します。(他の演算子は、数値引数を持つ以外の方法で - または / または * を実際に解釈できないため、文字列に変換されます)。

解決策は、文字列属性を次のような数値に変換することです...

if(selectedCity=="Bakalund"){
    var T = svg.getElementById("c");
    radius=Number(T.getAttribute("r"));
    T.setAttribute("r",(popsize/bakaInitPop)*radius);
    return bakaInitPop=popsize;
}
else{
    var T = svg.getElementById("rs");
    dimention=Number(T.getAttribute("width"));
    initx1 =Number(T.getAttribute("x"));
    alert(initx1);
    inity1=Number(T.getAttribute("y"));
    var cal =(popsize/SunnInitPop)*dimention;
    alert(cal);
    T.setAttribute("width",cal);
    T.setAttribute("height",cal);
    var newx1 = initx1 +((dimention-cal)/2);
    alert(newx1);
    var newy1 = inity1 +((dimention-cal)/2);
    T.setAttribute("x",newX);
    T.setAttribute("y",newY);
    return SunnInitPop=popsize;
}
于 2012-12-07T22:04:22.773 に答える