私は一見単純な問題で半日戦ったが役に立たなかったので、スタックオーバーフローの天才から良いアドバイスを得たい.
http://62.165.130.126/d3-questionにデモがあります
私はそれをjsfiddleに入れようとしましたが、ライブラリを正しく取得できませんでした.これであなたが飛び込むことができることを願っています.
テキストの回転が消えると、d3.js JavaScript コードで問題が発生します。または、実際には回転テキストの一部です。
ページ上のバーの各ペアには、隣接するバーを上書きしないように、45 度 (下り坂) 回転した 2 行のテキストが必要です。テキストを回転しないと、すべてが表示されます (重なっています) が、そうすると、最初の行のペアだけが問題ありません。その後、最初のテキストは消えます (または、いくつかのバージョンでは、何十ピクセルも無計画に配置されているように見えます) が、2 番目のテキストは、まったく同じコード構造を使用する必要がある場所に配置されます。値を交換しましたが、問題は値ではなく順序に関連しています。
これが私が書いたjavascriptのメインコードです。
$.each(data, function(a_key,a_val){
$.each(a_val, function(form_key,form_val){
$.each(form_val, function(person_key,person_val){
svg.append("rect")
.attr("x", start*2*width+width)
.attr("y", 420-person_val.val1/person_val.val1_max*400)
.attr("width", width-5)
.attr("height", person_val.val1/person_val.val1_max*400)
.style("fill", "red");
svg.append("rect")
.attr("x", start*2*width)
.attr("y", 420-person_val.val2/person_val.val2_max*400)
.attr("width", width-5)
.attr("height", person_val.val2/person_val.val2_max*400)
.style("fill", "green");
svg.append("text")
.attr("text-anchor", "start")
.attr("transform","translate(" + start*2*width+20 + ",430) rotate(45)")
.style("font-size","0.85em")
.text(person_val.pname);
svg.append("text")
.attr("text-anchor", "start")
.attr("transform","translate(" + start*2*width + ",430) rotate(45)")
.style("font-size","0.85em")
.text(person_val.ptype);
start++;
});
});
アプリケーションは実際のソリューションのモックアップにすぎませんが、気を散らすことなく本質的な問題を示す必要があります。バーの各ペアには、その下に説明テキストが必要です。現在、それらはまだ中央に配置されていませんが、状況が整理されれば、その変更は簡単になるはずです。
コードを修正する方法を知っている人はいますか?