D3 - 一些刻度线和网格线不渲染

时间:2017-01-11 16:02:23

标签: javascript d3.js svg

我有D3应用程序创建需要刻度线和网格线的图。定期地,一些刻度线和网格线消失。还有一些网格线较粗。请注意,我需要左/右y轴刻度线和顶部/底部x轴刻度线。

网格不同的笔划宽度

Different stroke widths

丢失的刻度标记和网格线

Lost Tick marks and Grid Lines

以下是基本网格



    //================grid lines=============
    var height = PlotHeight-30
    //---Draw the x Grid lines, dynamic: changes vs Julian/Calendar select---
    GridXG = GridG.append("g")
    .attr("pointer-events", "none")
    .attr("shape-rendering" ,"crispEdges")
    .attr("id", "gridXG")
    .attr("class", "gridX")
    .attr("fill", "none")
    .attr("stroke", "lightgrey")
    .attr("stroke-opacity", ".7")
    .attr("stroke-width", "1")
    .attr("transform", "translate(0," + (height) + ")")

    if(DateFormat=="Julian")
    GridXG.call(make_x_axisJulian() //---default--
        .tickSize(-height, 0, 0)
        .tickFormat("")
    )
    else if(DateFormat=="Calendar")
        GridXG.call(make_x_axisCalendar()
        .tickSize(-height, 0, 0)
        .tickFormat("")
    )

    // Draw the y Grid lines
    GridYG = GridG.append("g")
    .attr("pointer-events", "none")
    .attr("shape-rendering" ,"crispEdges")
    .attr("id", "gridYG")
    .attr("class", "gridY")
    .attr("fill", "none")
    .attr("stroke", "lightgrey")
    .attr("stroke-opacity", ".7")
    .attr("stroke-width", "1.5")
    .call(make_y_axis()
        .tickSize(-XaxisWidth, 0, 0)
        .tickFormat("")
    )




有没有人有一些建议可以让我朝着正确的方向前进? 感谢

0 个答案:

没有答案