Question

我想在Ext面板中加载图像（jpg / png），然后使用D3在该图像的顶部绘制线条/标记/图标。我尝试了两种方法，但没有一种方法可行。在这两种方法中，我使用这些listeneres来触发相同的函数（'renderMap'），然后尝试加载图像并在其上绘制：

listeners: {
    afterrender: 'renderMap',
    resize: 'renderMap'
}

测试1：使用空的Ext面板让D3加载图像。结果：这会加载图像（我可以看到浏览器实际上正在检索jpg）但不会在屏幕上显示它（使用Chrome和IE测试）。

var the_id = "#" + panel.getId();

var svg = d3.select(the_id).append('svg').attr({
      width: 300,
      height: 300,
      border: '1px solid #ccc'
    });

svg.append('svg:image')
    .attr({
      'xlink:href': 'http://localhost/map/test.jpg',
      x: 0,
      y: 0,
      width: 128,
      height: 128
    });

测试2：首先使用Extjs加载图像

init: function() {

    var image = Ext.create({
        xtype: 'image',
        src: 'http://localhost/map/test.jpg', 
        style:'background-repeat: no-repeat;background-size: auto 100%;background-position: center;'
    });

    this.getView().add(image);

然后查找新添加的图像并尝试在renderMap函数中使用D3进行一些绘图：

renderMap: function (panel) {

    var image = panel.down('image')
    var the_id = "#" + image.getId();
    var rectsize = 100;

    var svg = d3.select(the_id)
            .append("svg")
            .attr("height", rectsize*10)
            .attr("width", rectsize*10);

    svg.selectAll("rect")
            .append("rect")
            .attr("width", rectsize)
            .attr("height", rectsize)
            .attr("x", function(d, i) { return  i*(rectsize + 2); })
            .attr("y", function(d, i) { return rectsize; })
            .style("fill", "yellow")
            .style("stroke", "black")
            .style("stroke-width", "5px");

这样可以成功加载图像但在其上面没有任何内容... 任何帮助都非常感谢 - 谢谢！

Answer 1

在foodsModel.find()返回Ext image = panel.down('image')而 d3 需要Ext.Element。

使用：

dom

Answer 2

感谢Geoman Yabes和bluehipy的评论，我想出了如何让它发挥作用。因为bluehipy的答案没有提供我需要完全工作的全部逻辑，我想分享对我有用的东西我正在回答我自己的问题，但是会投票给另一个答案，特别是我需要的bluehpy评论在svg中添加图像，然后在svg中添加圆圈（其他图纸）。这是我的代码：

var w = panel.getWidth();
var h = panel.getHeight();

// The DOM of the panel's body
var panelBodyDom = panel.body.el.dom;

var colors = d3.scale.category10();

// clear everything and reload
d3.select(panelBodyDom).selectAll("div").remove();

var svg_div_container = d3.select(panelBodyDom).append("div").attr({
    class:  "chart",
    width:  w + "px",
    height: h + "px",
    style:  "vertical-align:left",
    align:  "left"
});

var svg = svg_div_container.append('svg').attr({
    width:  w,
    height: h,
    border: '1px solid #ccc'
});

var svg_image = svg.append('svg:image')
.attr({
  'xlink:href': 'http://localhost/map/' + view.config.mapId + '.jpg', 
  'x': 0,
  'y': 0,
  'width': w,
  'height': h,
  'style': 'vertical-align:left',
  'align' : 'left'
});

svg.append("svg:circle")
    .attr("r", h/3)
    .attr("cx", w/2)
    .attr("cy", 50)
    .style("fill",colors(h));

现在我需要弄清楚如何使图像左对齐。无论我做什么，图像都放在svg / div的中心。但如果我自己无法弄明白，我会再提出一个问题。谢谢大家的回答和评论导致解决方案！

Extjs + D3;加载并绘制到图像上

2 个答案: