D3.js implementieren Sie Auslassungspunkte für die Achsenbeschriftungen SVG

Unten ist der code, der die Anzeige der Achse

var xScale = d3.scale.ordinal()
.rangeRoundBands([0, totalWidth], barSpacing(optionsConfig.chart.barSpacing))
.domain(chartData.map(function(d) {
    return d[xValue];
}));
//Assign Scale to X Axis
xAxis.scale(xScale);

Möchte ich zeigen, Ellipse auf der x-Achse, wenn der text zu lang ist
Ich beziehe mich auf diese link hat die Lösung unter

function wrap() {
        var self = d3.select(this),
            textLength = self.node().getComputedTextLength(),
            text = self.text();
        while (textLength > (width - 2 * padding) && text.length > 0) {
            text = text.slice(0, -1);
            self.text(text + '...');
            textLength = self.node().getComputedTextLength();
        }
    } 
text.append('tspan').text(function(d) { return d.name; }).each(wrap);

aber kann einer mir helfen, wie die Umsetzung der oben genannten code, da ich neu bin und zu d3.js oder Sie schlagen, wenn dies getan werden kann, mit CSS-oder SVG-Ansatz.

InformationsquelleAutor Rakesh | 2016-10-04



One Reply
  1. 3

    Diesem Weg versuchen.

    function wrap() {
      var self = d3.select(this),
        textLength = self.node().getComputedTextLength(),
        text = self.text();
      while (textLength > (barWidth - 2 * padding) && text.length > 0) {
        text = text.slice(0, -1);
        self.text(text + '...');
        textLength = self.node().getComputedTextLength();
      }
    }
    
    var padding = 0, barWidth = x.bandwidth();
    var xAxis = d3.select(".axis--x"); //Selector should be the class given to the x axis
    
    xAxis.selectAll(".tick")
      .selectAll("text")
      .html("")
      .append('tspan').text(function(d) {
        return d;
      }).each(wrap);

    JS:

    var svg = d3.select("svg"),
      margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;
    
    
    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
      y = d3.scaleLinear().rangeRound([height, 0]);
    
    var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var data = [{
      "letter": "Abcdeafg Abcdeafg",
      "frequency": 0.08167
    }, {
      "letter": "Bcdefagh Bcdefagh",
      "frequency": 0.01492
    }, {
      "letter": "Cdefgahi Cdefgahi",
      "frequency": 0.02782
    }, {
      "letter": "Defghaij Defghaij",
      "frequency": 0.04253
    }, {
      "letter": "Efghaijk Efghaijk",
      "frequency": 0.12702
    }, {
      "letter": "Fghijakl Fghijakl",
      "frequency": 0.02288
    }, {
      "letter": "Ghijaklm Ghijaklm",
      "frequency": 0.02015
    }, {
      "letter": "Hijklman Hijklman",
      "frequency": 0.06094
    }, {
      "letter": "Ijklmnao Ijklmnao",
      "frequency": 0.06966
    }, {
      "letter": "Jklmnoap Jklmnoap",
      "frequency": 0.00153
    }, {
      "letter": "Klmnopqa Klmnopqa",
      "frequency": 0.00772
    }, {
      "letter": "Lmnopqar Lmnopqar",
      "frequency": 0.04025
    }, {
      "letter": "Mnopqrsa Mnopqrsa",
      "frequency": 0.02406
    }, {
      "letter": "Nopqrsta Nopqrsta",
      "frequency": 0.06749
    }, {
      "letter": "Opqrstua Opqrstua",
      "frequency": 0.07507
    }, {
      "letter": "Pqrstuva Pqrstuva",
      "frequency": 0.01929
    }, {
      "letter": "Qrstuvwa Qrstuvwa",
      "frequency": 0.00095
    }, {
      "letter": "Rstuvwxya Rstuvwxya",
      "frequency": 0.05987
    }];
    data.forEach(function(d) {
      d.frequency = +d.frequency;
      return d;
    });
    
    x.domain(data.map(function(d) {
      return d.letter;
    }));
    y.domain([0, d3.max(data, function(d) {
      return d.frequency;
    })]);
    
    g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
    
    g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "%"))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Frequency");
    
    g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) {
        return x(d.letter);
      })
      .attr("y", function(d) {
        return y(d.frequency);
      })
      .attr("width", x.bandwidth())
      .attr("height", function(d) {
        return height - y(d.frequency);
      });
    
    function wrap() {
      var self = d3.select(this),
        textLength = self.node().getComputedTextLength(),
        text = self.text();
      while (textLength > (barWidth - 2 * padding) && text.length > 0) {
        text = text.slice(0, -1);
        self.text(text + '...');
        textLength = self.node().getComputedTextLength();
      }
    }
    
    var padding = 0, barWidth = x.bandwidth();
    var xAxis = d3.select(".axis--x");
    
    xAxis.selectAll(".tick")
      .selectAll("text")
      .html("")
      .append('tspan').text(function(d) {
        return d;
      }).each(wrap);

    CSS:

    .bar {
      fill: steelblue;
    }
    .bar:hover {
      fill: brown;
    }
    .axis--x path {
      display: none;
    }

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.