一段时间后SVG Rect失去中风

Question

由于某些原因，我的rect在经过一段随机时间（有时为50秒）后失去了一些中风，真的无法想到任何原因，也许您可​​以帮忙吗？

这是小提琴-http: //jsfiddle.net/nhe613kt/368/

一些代码

$(window).resize(OwResize);

function OwResize() {
    $("#myConta").height($(window).innerHeight() - ($(window).innerHeight() / 40));
}

var sideRectW = window.innerWidth / 20,
    sideRectH = $(window).innerHeight() / 20,
    width = $(window).innerWidth() - ($(window).innerWidth() / 50),
    height = $(window).innerHeight() - ($(window).innerHeight() / 40),
    boxW = (width - sideRectW) / 4,
    boxH = (height - sideRectH) / 4,
    boxSize = boxW + boxH,
    xPos1 = sideRectW,
    xPos2 = boxW + sideRectW,
    xPos3 = (boxW * 2) + sideRectW,
    xPos4 = (boxW * 3) + sideRectW,
    yPos1 = 0,
    yPos2 = boxH,
    yPos3 = boxH * 2,
    yPos4 = boxH * 3;


var CreateRect = function (x, y, boxColor, boxId) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("id", "rectBox" + boxId)
        .attr("width", boxW)
        .attr("height", boxH)
        .attr("fill", boxColor)
        .attr("stroke", "black")
        .attr("class", "hover_group")
        .attr("onclick", "alert('haha');");
};
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, size) {
    svgContainer.append("text")
        .attr("x", x)
        .attr("y", y)
        .attr("fill", textColor)
        .attr("font-size", size)
        .text(text);
};
var CreateText90 = function (x, y, text, textColor, size) {
    svgContainer.append("text")
        .attr("x", x)
        .attr("y", y)
        .attr("fill", textColor)
        .attr("font-size", size)
        .attr("transform", "rotate(-90," + x + 20 + ", " + y + ")")
        .text(text);
};
var svgContainer = d3.select("#myConta")
    .append("svg")
    .attr("id", "myContasvg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("preserveAspectRatio", "none")
    .attr("viewBox", "0 0 " + width+ " " + height)
    .attr("fill", "#2E2E2E")
    .attr("float", "right")
    .append("g");

CreateRectWithLength(0, 0, sideRectW, window.innerHeight, "Black");
CreateRectWithLength(0, height - sideRectH, width, sideRectH, "Black");

CreateText90(0, yPos3, "Sales", "white", 16);
CreateText(xPos3, height - sideRectH / 5, "Profit", "white", 16);

CreateText(sideRectW / 2, yPos1 + (boxH / 2), "3", "white", 12);
CreateText(sideRectW / 2, yPos2 + (boxH / 2), "2", "white", 12);
CreateText(sideRectW / 2, yPos3 + (boxH / 2), "1", "white", 12);
CreateText(sideRectW / 2, yPos4 + (boxH / 2), "0", "white", 12);

CreateText(xPos1 + (boxW / 2), height - sideRectH / 2, "0", "white", 12);
CreateText(xPos2 + (boxW / 2), height - sideRectH / 2, "1", "white", 12);
CreateText(xPos3 + (boxW / 2), height - sideRectH / 2, "2", "white", 12);
CreateText(xPos4 + (boxW / 2), height - sideRectH / 2, "3", "white", 12);

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

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

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

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

图片证据

Answer 1

您可以尝试指定笔划的宽度：

该属性的代码为：

stroke-width="2"

您可以在元素本身中或元素中应用笔触。