web-dev-qa-db-ja.com

d3サークルにテキストを追加

サークルにテキストを追加しようとしています。 mbostockチュートリアル の例を使用してきましたが、適切な出力を取得できませんでした。

コードスニペットは次のとおりです。

var data;
var code;

d3.json("/json/trace.json", function(json) {
  data = json;
  console.log(data);
  // get code for visualization
  code = data["code"];
  alert(code);
  var mainSVG = d3
    .select("#viz")
    .append("svg")
    .attr("width", 900)
    .attr("height", 900);
  mainSVG
    .append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 100)
    .attr("cx", 300)
    .attr("cy", 300);
  circle = mainSVG.selectAll("circle").data([code]);
});

この仕事を得る方法の提案はありますか？

javascriptsvgd3.js
56
gizmo

Jsonファイルからのデータを含む円で囲まれたテキストを示す例を次に示します。 http://bl.ocks.org/4474971 。次のようになります：

enter image description here

この背後にある主なアイデアは、同じdivに会社のロゴと名前を付けるためにhtmlで行うのと同じ「div」にテキストと円をカプセル化することですページヘッダー。

主なコードは次のとおりです。

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

d3.json("data.json", function(json) {
    /* Define the data for the circles */
    var elem = svg.selectAll("g")
        .data(json.nodes)

    /*Create and place the "blocks" containing the circle and the text */  
    var elemEnter = elem.enter()
        .append("g")
        .attr("transform", function(d){return "translate("+d.x+",80)"})

    /*Create the circle for each block */
    var circle = elemEnter.append("circle")
        .attr("r", function(d){return d.r} )
        .attr("stroke","black")
        .attr("fill", "white")

    /* Create the text for each block */
    elemEnter.append("text")
        .attr("dx", function(d){return -20})
        .text(function(d){return d.label})
})

jsonファイルは次のとおりです。

{"nodes":[
  {"x":80, "r":40, "label":"Node 1"}, 
  {"x":200, "r":60, "label":"Node 2"}, 
  {"x":380, "r":80, "label":"Node 3"}
]}

結果のHTMLコードは、必要なカプセル化を示しています。

<svg width="960" height="500">
    <g transform="translate(80,80)">
        <circle r="40" stroke="black" fill="white"></circle>
        <text dx="-20">Node 1</text>
    </g>
    <g transform="translate(200,80)">
        <circle r="60" stroke="black" fill="white"></circle>
        <text dx="-20">Node 2</text>
    </g>
    <g transform="translate(380,80)">
        <circle r="80" stroke="black" fill="white"></circle>
        <text dx="-20">Node 3</text>
    </g>
</svg>
74
Christopher Chiche

おそらく、一歩後退して、理論を理解するまでjsonをドロップしてください。

http://tributary.io/inlet/4132672/ （この例でenjalotが提示した実例 video 。彼が持っている他のd3ビデオをチェックすることを強くお勧めします。

3
zeffii

私がより簡単に考える方法は次のとおりです。一般的な考え方は、円要素にテキスト要素を追加し、その円のポイントにテキストを配置するまでその「dx」属性と「dy」属性を操作することです。好む。私の例では、テキストを中央の左側から開始したいので、dxに負の数を使用しました。

const nodes = [ {id: ABC, group: 1, level: 1}, {id:XYZ, group: 2, level: 1}, ]

const nodeElems = svg.append('g')
.selectAll('circle')
.data(nodes)
.enter().append('circle')
.attr('r',radius)
.attr('fill', getNodeColor)

const textElems = svg.append('g')
.selectAll('text')
.data(nodes)
.enter().append('text')
.text(node => node.label)
.attr('font-size',8)//font size
.attr('dx', -10)//positions text towards the left of the center of the circle
.attr('dy',4)
2
Kenaa