Question

尝试如下实现X轴：

但默认实现如下：

实现如下：

baseGroup.append("g")
              .attr("class", "xaxis")
              .attr("transform", "translate(5," + (height - marginBottom) + ")")
              .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '0.5px','font-size': '14px', 'shape-rendering': 'crispEdges'})
              .call(xBar);

想要删除每个刻度线上的竖条。任何人都可以建议我设计D3 x轴的正确方法吗？

Answer 1

要设置内部刻度的大小，您必须使用axis.innerTickSize。根据{{3}}：

如果指定了size，则将内部刻度尺寸设置为指定值并返回轴。如果未指定size，则返回当前内部刻度大小，默认为6.

因此，在您的情况下，轴生成器应该是这样的：

var xBar = d3.svg.axis()
    .scale(scale)
    .orient("bottom")
    .outerTickSize(0)
    .innerTickSize(0)

这是一个演示：

var svg = d3.select("svg");
var scale = d3.scale.linear()
  .domain([0, 100])
  .range([20, 480]);

var axis = d3.svg.axis()
  .scale(scale)
  .orient("bottom")
  .outerTickSize(0)
  .innerTickSize(0)
  .tickPadding(10);

svg.append("g")
  .attr("class", "x axis")
  .style({
    'stroke': 'gray',
    'fill': 'none',
    'stroke-width': '1px',
    'font-size': '14px',
    'shape-rendering': 'crispEdges'
  })
  .attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="500" height="100"></svg>

Answer 2

根据D3 changes documentation，outerTickSize和innerTickSize已分别重命名为tickSizeInner和tickSizeOuter。

因此，更新Gerardo Furtado的答案，代码段将是：

from django.http import JsonResponse

def my_func_view(request):
    template = 'accounts/profile.html'
    form = Form123(request.POST or None)    

    if request.is_ajax():
        if form.is_valid():
            instance = form.save(commit=True)
            return JsonResponse({'status':'data'})

        else:
            messages.error(request, 'There was an error.')
            return JsonResponse({'status':'data'})

    else:
        context = {'form': form,}

    return render(request, template, context)

Answer 3

可以通过 css属性来实现。将轴刻度线的stroke-opacity减少为 0

＆＃13;

var svg = d3.select("svg");
var scale = d3.scale.linear()
  .domain([0, 100])
  .range([20, 480]);

var axis = d3.svg.axis()
  .scale(scale)
  .orient("bottom")
  .tickPadding(10);

svg.append("g")
  .attr("class", "x axis")
  .style({
    'stroke': 'gray',
    'fill': 'none',
    'stroke-width': '1px',
    'font-size': '14px',
    'shape-rendering': 'crispEdges'
  })
  .attr("transform", "translate(0,50)")
  .call(axis);

＆＃13;

.x.axis>.tick> line {
	stroke-opacity: 0;
}

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width='500' height='200'>

＆＃13;

D3 x轴移除垂直条

3 个答案: