Question

如何轻松地在某些位置绘制网格线？

我想在x轴上垂直（0,25,50,100,125,250,500,750,1k，1.5k，2k，3k，4k，5k，6k）画线。 / p>

使用here时，我无法控制绘制网格线的位置。我还尝试使用axis.ticks()传递指定位置的数组，但它不起作用。

更新：如果我使用.data(xScale.ticks(15))//FIXME，则线条不会精确地绘制在刻度线上方。

如果我使用.data(xScale.tickValues([0, 25, 50, 100, 125, 250, 500, 750]))代替.data(xScale.ticks(15))//FIXME，则不会绘制网格线。

更新2：以下更改对我有用：

//specify where to draw all lines
var lines = [0, 25, 50, 100, 125, 250, 500, 750, 1000, 1500, 2000, 3000, 4000, 5000, 6000];

//use your specified lines as data
.data(lines)

这准确地写在我的行的指定位置。您既可以指定绘制所有行的位置，也可以只指定不存在刻度的值，并添加Cyril建议的.innerTickSize(-h)

这是我的代码（更新的代码）：

var w = 400;
var h = 175;
var padding = 30;

// custom scale:
var scale = [0,125,250,500,1000,2000,4000,6000];
var output = [0,50,100,150,200,250,300,350];

//specify where to draw all lines
var lines = [0, 25, 50, 100, 125, 250, 500, 750, 1000, 1500, 2000, 3000, 4000, 5000, 6000];

var xScale = d3.scale.linear()
    .domain(scale)
    .range(output);

// The axis uses the above scale and the same domain:
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickValues(scale)
    .tickFormat(d3.format("s"));

var svg = d3.select(element)
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Create X axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate("+padding+"," + (h - padding) + ")")
    .call(xAxis);


//drawing grid lines
var bar_height = h - padding;
svg.append("g")
    .attr("class", "lines")
    .selectAll("line")
    //.data(xScale.ticks(15))//FIXME
    //use your specified lines as data
    .data(lines)
    .enter().append("line")
    .attr("x1", function(d) { return xScale(d); })
    .attr("x2", function(d) { return xScale(d); })
    .attr("y1", 0)
    .attr("y2", bar_height);

Answer 1

您可以执行类似这样的操作来绘制网格线，只需延长内部刻度尺寸。

if (!button.hasEventListener(MouseEvent.CLICK)) {
    button.addEventListener(MouseEvent.CLICK, extracard);
}

工作代码here

修改

为了隐藏几个刻度，你可以这样做：

var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickValues(scale) .innerTickSize(-h)//for extending the grid line .tickFormat(d3.format("s"));

使用以下条件定义xaxis tickformat：

//define scale and its related domain like this. var scale = [0,25,50,100, 125,250,500,750,1000,2000,3000,4000,5000,6000]; var output = [0,20, 40, 80, 100,200,300,340,400,500,550,600,650,700]; //define ticks that not be displayed this means ticks will not be drawn for the array. var scaleTicksNotDisplay = [250, 3000,5000]

工作代码here

希望这有帮助！

d3 - 在指定位置绘制网格线

1 个答案: