Question

我想通过点击条形图中的条形图将当前的1个图像追加到DIV元素，但我只得到第一个图像。如果我使用enter（），那么我得到的所有图像都是第一个。

var data = [{"val": 5,  "imgsrc": "http://placehold.it/300x100"},
        {"val": 40, "imgsrc": "a1.png"},
        {"val": 50, "imgsrc": "http://placehold.it/200x100"},
        {"val": 60, "imgsrc": "http://placehold.it/150x100"},
        {"val": 80, "imgsrc": "http://placehold.it/100x100"}];  

var width = 500;
var height = 500;

var widthScale = d3.scale.linear()
                .domain([0, 100])
                .range([0, width]);

var color = d3.scale.linear()
                .domain([0, 100])
                .range(["red", "blue"]);    

var axis = d3.svg.axis()
                .scale(widthScale)
                .ticks(5);

var container = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(20, 0)");

var bars = container.selectAll("rect")
                .data(data)
                .enter()
                    .append("rect")
                    .attr("width", function(d){ return widthScale(d.val) })
                    .attr("height", 30)
                    .attr("fill", function(d){ return color(d.val) })
                    .attr("y", function(d, i){ return i * 50 });

var setEvents = bars          
                .on( 'click', function (d) {
                    d3.select("#tool").style("opacity", 1.0); 
                    d3.select("#tool").html(d.imgsrc); 
                    d3.select('#tool')
                        .data(data) 
                        //.enter()
                        .append('img')
                        .attr('src', function(d, i) {return d.imgsrc;});               
           });

container.append("g")
                .attr("transform", "translate(0, 400)")
                .call(axis);

提前完成。

Answer 1

使用数组变量images来保存选定的图像网址。单击条形更新阵列。您可以创建图像元素，如下所示。

var images = [];

var setEvents = bars
  .on('click', function(d) {
    d3.select("#tool").style("opacity", 1.0);
   // d3.select("#tool").html(d.imgsrc);
    images.push(d.imgsrc);
    d3.select('#tool')
      .selectAll("img")
      .data(images)
      .enter()
      .append('img')
      .attr("width", 50)
      .attr("height", 50)
      .attr('src', function(d, i) {
        return d
      });
  });

工作代码段：

var data = [{
  "val": 5,
  "imgsrc": "http://www.iconsdb.com/icons/preview/gray/square-rounded-xxl.png"
}, {
  "val": 40,
  "imgsrc": "http://www.iconsdb.com/icons/preview/color/005500/square-rounded-xxl.png"
}, {
  "val": 50,
  "imgsrc": "http://www.iconsdb.com/icons/preview/black/square-rounded-xxl.png"
}, {
  "val": 60,
  "imgsrc": "http://www.iconsdb.com/icons/preview/color/550055/square-rounded-xxl.png"
}, {
  "val": 80,
  "imgsrc": "http://www.iconsdb.com/icons/preview/color/990000/square-rounded-xxl.png"
}];

var width = 500;
var height = 500;

var widthScale = d3.scale.linear()
  .domain([0, 100])
  .range([0, width]);

var color = d3.scale.linear()
  .domain([0, 100])
  .range(["red", "blue"]);

var axis = d3.svg.axis()
  .scale(widthScale)
  .ticks(5);

var container = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(20, 0)");

var bars = container.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", function(d) {
    return widthScale(d.val)
  })
  .attr("height", 30)
  .attr("fill", function(d) {
    return color(d.val)
  })
  .attr("y", function(d, i) {
    return i * 50
  });

var images = [];

var setEvents = bars
  .on('click', function(d) {
    d3.select("#tool").style("opacity", 1.0);
   // d3.select("#tool").html(d.imgsrc);
    images.push(d.imgsrc);
    d3.select('#tool')
      .selectAll("img")
      .data(images)
      .enter()
      .append('img')
      .attr("width", 50)
      .attr("height", 50)
      .attr('src', function(d, i) {
        return d
      });
  });

container.append("g")
  .attr("transform", "translate(0, 400)")
  .call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="tool"></div>

修改

D3，js on mouse event CLICK仅附加数据集中的第一个图像

1 个答案: