2

画像と画像タイトルを含む div が必要です。次のコードで画像を取得できますが、div 内で画像とテキストを組み合わせることができません。

function update(sel) {
        console.log('update')
        console.log(sel)
        update_images(d3.select("#fotoos"), sel);
}

function update_images(ul, data) {
  var image = ul.selectAll("img").data(data);
  image.exit().remove();
  image.enter().append("img");
  image.attr("class", "foto");
  image.attr("src", function(d) {
      var u = '{{ =URL('download') }}'
      return u.concat("/", d.file) })
}

以下はどうすれば入手できますか？

<div>
   <p ...
   <img ...
</div>

ありがとう、リチャード

注: {{ }} コードは Web2Py からのものです

4

1 に答える 1

0

http://jsfiddle.net/zceg2/1/で実際の例を見ることができます。

最初にコンテナー要素 (divこの場合は ) を作成してから、その選択内容を使用してテキストと画像を追加する必要があります。

var data = [{id: 1, text: 'sample text 1', imgsrc: 'http://placehold.it/100x100'},
            {id: 2, text: 'sample text 2', imgsrc: 'http://placehold.it/100x100'},
            {id: 3, text: 'sample text 3', imgsrc: 'http://placehold.it/100x100'},
            {id: 4, text: 'sample text 4', imgsrc: 'http://placehold.it/100x100'}];

var gallery = d3.select('body').append('div');

var container = gallery.selectAll('.container')
    .data(data, function(d) { return d.id; });

container.enter().append('div')
    .attr('class', 'container')

container.exit().remove();


container.selectAll('.text')
    .data(function(d) { return [d]; })
    .enter().append('p')
    .attr('class', 'text')
    .text(function(d) { return d.text; });

container.selectAll('.picture')
    .data(function(d) { return [d]; })
    .enter().append('img')
    .attr('class', 'picture')
    .attr('src', function(d) { return d.imgsrc; });
于 2012-10-22T16:49:25.893 に答える