0

私はいくつかのサンプルコードに取り組んでいるので、これらのツールチップの操作方法がよくわかりません. ほろ酔いを使用して各円にツールチップを追加する d3.js によって作成された散布図があります。これは、円をロールオーバーしたときにラベルを追加するコードの一部です。

circles.append("title")
  .text(function(d) { return d.attribute; })

「属性」は、私のデータの列の 1 つです。これを任意の列名に変更すると、それがツールチップに表示されます。私がやりたいのは、各列のデータを含む完全な文をツールチップに表示することです。私がやりたいのは次のようなものです。もちろん、まったく機能しませんが、要点が伝わることを願っています。

circles.append("title")
  .text(function(d) { return d.attribute; } + "some text here" + function(d) { return d.variance; }    + "more text here" + function(d) { return d.incidence; })

これをどのように機能させるかについての考えはありますか？

4

1 に答える 1

1

あなたはこれを行うことができます：

circles.append("title")
  .text(function(d) {
     return d.attribute + " some text here " + d.variance + " more text here " + d.incidence;
  })

すべて一緒に:

var data = [
  {
    "attribute": "attr1",
    "variance": "variance1",
    "incidence": "incidence1"
  },
  {
    "attribute": "attr2",
    "variance": "variance2",
    "incidence": "incidence2"
  },
  {
    "attribute": "attr3",
    "variance": "variance3",
    "incidence": "incidence3"
  } 
];

var svg = d3.select('body').append('svg');

svg.attr('height',500).attr('width',500);

var circles = svg.selectAll('circle').data(data);

circles.enter().append('circle')
  .attr('cx',function(d,i) { return i * 100 + 100;})
  .attr('cy',function(d,i) { return 100})
  .attr('r',50)
  .attr('fill','green')
  .append('title')
  .text(function(d) {
    return d.attribute + " some text here " + d.variance + " more text here " + d.incidence;
  }) 
  .attr('fill', 'black')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

于 2014-11-24T02:33:26.890 に答える