[javascript] डी 3 सर्कल में पाठ जोड़ें



Answers

वास्तविक आवश्यकताओं को फिट करने के लिए ऊपर दिए गए उदाहरण को विस्तारित किया गया है, जहां ठोस पृष्ठभूमि रंग से घिरा हुआ है, फिर धारीदार पैटर्न के साथ और उस पाठ नोड के बाद सर्कल के केंद्र पर रखा जाता है।

var width = 960,
  height = 500,
  json = {
    "nodes": [{
      "x": 100,
      "r": 20,
      "label": "Node 1",
      "color": "red"
    }, {
      "x": 200,
      "r": 25,
      "label": "Node 2",
      "color": "blue"
    }, {
      "x": 300,
      "r": 30,
      "label": "Node 3",
      "color": "green"
    }]
  };

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

svg.append("defs")
  .append("pattern")
  .attr({
    "id": "stripes",
    "width": "8",
    "height": "8",
    "fill": "red",
    "patternUnits": "userSpaceOnUse",
    "patternTransform": "rotate(60)"
  })
  .append("rect")
  .attr({
    "width": "4",
    "height": "8",
    "transform": "translate(0,0)",
    "fill": "grey"
  });

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

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

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

  var circleOuter = elemEnter.append("circle")
    .attr("r", function(d) {
      return d.r
    })
    .attr("stroke", function(d) {
      return d.color;
    })
    .attr("fill", "url(#stripes)");

  /* Create the text for each block */
  elemEnter.append("text")
    .text(function(d) {
      return d.label
    })
    .attr({
      "text-anchor": "middle",
      "font-size": function(d) {
        return d.r / ((d.r * 10) / 100);
      },
      "dy": function(d) {
        return d.r / ((d.r * 25) / 100);
      }
    });
};

plotChart(json);
.node-group {
  fill: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

आउटपुट:

नीचे codepen का लिंक भी है:

@mkdudeja पर मनीष कुमार ( @mkdudeja ) द्वारा पेन D3-Circle-Pattern-Text देखें

धन्यवाद, मनीष कुमार

Question

मैं सर्कल में कुछ पाठ जोड़ने की कोशिश कर रहा हूं। मैं http://mbostock.github.com/d3/tutorial/circle.html से उदाहरण का पालन कर रहा हूं लेकिन सही आउटपुट प्राप्त करने में सक्षम नहीं था।

कोड स्निपेट है:

    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]);

    }) ;

कोई सुझाव यह काम कैसे प्राप्त करें? आपका बहुत बहुत धन्यवाद!




यहां एक तरीका है जिसे मैं आसान मानता हूं: सामान्य विचार यह है कि आप किसी तत्व तत्व को एक तत्व तत्व में जोड़ना चाहते हैं, फिर अपने "dx" और "dy" विशेषताओं के साथ खेलें जब तक कि आप उस सर्कल में बिंदु पर टेक्स्ट को पोजिशन न करें पसंद। मेरे उदाहरण में, मैंने डीएक्स के लिए ऋणात्मक संख्या का उपयोग किया क्योंकि मैं केंद्र के बाईं ओर पाठ शुरू करना चाहता था।

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)



Related