Div与SVG rect内联

Question

我想要这个，

到目前为止，我所取得的成就是 - http://jsfiddle.net/nhe613kt/116/

我需要的只是为双方和文字添加编号＆＃34;销售＆＃34;和＃34;利润＆＃34;，我尝试添加几个div但是然后他们带上了空格，这里添加这些数字的最佳方法是什么，我想在JS中这样做，最好是因为盒子的数量可能会警惕。 / p>

代码

$("#myConta").height(window.innerHeight - (window.innerHeight / 40));

var width = window.innerWidth - (window.innerWidth / 10),
    height = window.innerHeight - (window.innerHeight / 10),
    boxW = width / 4,
    boxH = height / 4,
    boxSize = boxW + boxH,

    xPos1 = 0,
    xPos2 = boxW,
    xPos3 = boxW * 2,
    xPos4 = boxW * 3,
    yPos1 = 0,
    yPos2 = boxH,
    yPos3 = boxH * 2,
    yPos4 = boxH * 3;

var CreateRect = function (x, y, boxColor) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", boxW)
        .attr("height", boxH)
        .attr("fill", boxColor)
        .attr("class", "hover_group");
};
var CreateRectWithLength = function (x, y, w, h, boxColor) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", w)
        .attr("height", h)
        .attr("fill", boxColor);
};

var CreateText = function(x, y, text, textColor) {
     svgContainer.append("text")
         .attr("x", x)
         .attr("y", y)
         .attr("stroke", textColor)
         .text(text);
};

var CreateTextInMain = function(x, y, text, textColor) {
     $("#myConta").append("div")
         .attr("x", x)
         .attr("y", y)
         .attr("stroke", textColor)
         .text(text);
};

var svgContainer = d3.select("#myConta")
    .append("svg")
    .attr("id", "myContasvg")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "#2E2E2E")
    .attr("float", "right")
    .append("g");

CreateRect(xPos1, yPos1, "#C0FC3E");
CreateRect(xPos1, yPos2, "#60FC60");
CreateRect(xPos1, yPos3, "#64FE2E");
CreateRect(xPos1, yPos4, "#00FF00");

CreateRect(xPos2, yPos1, "#F6FF33");
CreateRect(xPos2, yPos2, "#AFFC3B");
CreateRect(xPos2, yPos3, "#00FF00");
CreateRect(xPos2, yPos4, "#64FE2E");

CreateRect(xPos3, yPos1, "#FDB500");
CreateRect(xPos3, yPos2, "#8DB723");
CreateRect(xPos3, yPos3, "#AFFC3B");
CreateRect(xPos3, yPos4, "#60FC60");

CreateRect(xPos4, yPos1, "red");
CreateRect(xPos4, yPos2, "#FDB500");
CreateRect(xPos4, yPos3, "#F6FF33");
CreateRect(xPos4, yPos4, "#C0FC3E");

//CreateText(xPos1 + (boxW / 2), height, "0", "black");
//CreateText(xPos2 + (boxW / 2), height, "1", "black");
//CreateText(xPos3 + (boxW / 2), height, "2", "black");
//CreateText(xPos4 + (boxW / 2), height, "3", "black");

//CreateText(xPos1 + 5, yPos1 + (boxH / 2), "3", "black");
//CreateText(xPos1 + 5, yPos2 + (boxH / 2), "2", "black");
//CreateText(xPos1 + 5, yPos3 + (boxH / 2), "1", "black");
//CreateText(xPos1 + 5, yPos4 + (boxH / 2), "0", "black");

//svgContainer.append("text")
//    .attr("x", 85)
//    .attr("y", 125)
//    .attr("font-size", 55)
//    .text("3")
//    .attr("onclick", "alert('You clicked A');");

HTML

<div id="myConta">
</div>

CSS

  .hover_group:hover {
      opacity: 0.5;
  }
  #myConta {
      background-color:black;
      text-align:right;
  }

Answer 1

根据另一个问题的this回答，您可以使用d3.svg.axis()

另一种解决方法是增加SVG宽度/高度，在SVG的右侧和底部插入与背景颜色相同的部分，这样您就可以将标签放在侧面新添加的部分上

这是一个基于您的代码（在chrome上测试）的jsfiddle演示

jsfiddle