1

HTMLページには、3つのブロックがあります。2つのテキストボックスと1つのインラインSVGで、たとえば円が含まれています。次に、一方のテキストボックスに円の半径を入力し、もう一方のテキストボックスに円の位置（カンマ区切りのxy座標）を入力してから、自動的に（有効な入力を使用したキーアップイベントで）円を再描画します）。

もちろん、私の実際の目標は円を描くことではなく、HTMLファイル内でHTML + SVG + Javascriptをアセンブルして、物事が起こり始め、最小限の作業で構築できるようにする方法を理解することです。

jQueryも歓迎されますが、必須ではありません。

グーグルとここ（SO）で少し検索しましたが、例は見つかりませんでしたが、これは初心者にとっては比較的簡単だと確信しています。

結論として、私が実際に計画しているのは、SVG要素内に、コースに沿った距離を表す一連の水平線（テキスト領域内に「name; distance」として指定）と、2番目のテキスト領域からの対角線をプロットすることです。自転車レースイベントの平均速度（横軸は走行時間）を表しますが、キックスタート後の宿題です。

4

2 に答える 2

1

コンマ区切りの入力はお勧めしません。正しくするには、多くの検証を行う必要があります。それでは、プロパティを 3 つの異なるテキスト入力に分けてみましょう...

<div>
  <label for="center_x">Center X</label>
  <input type="text" data-attr="cx" id="center_x" value="200" class="attr_change" />
</div>

<div>
  <label for="center_y">Center Y</label>
  <input type="text" data-attr="cy" id="center_y" value="200" class="attr_change" />
</div>

<div>
  <label for="center_y">Radius</label>
  <input type="text" data-attr="r" id="radius" value="100" class="attr_change" />
</div>

<svg xmnls="http://www.w3.org/2000/svg">
    <circle fill="#c00" cx="200" cy="200" r="100" id="change_this" />
</svg>

jQuery コードは単純です。

$('.attr_change').on('keyup', function(){
  var attr = $(this).attr("data-attr");
  var value = parseInt($(this).val(), 10);
  if ($.isNumeric(value)) {
    $("#change_this").attr(attr, value);
  }
})​

http://jsfiddle.net/hzn6q/

于 2012-09-22T20:34:07.087 に答える
0

これは、HTML SVG マッピング ツールと例のクラスターです。Beautiful Analytics Charts は最新の追加機能です... http://www.irunmywebsite.com/raphael/rapdevex.php?q=Charting

于 2012-09-22T19:52:48.783 に答える