【发布时间】：2016-07-28 06:36:05
【问题描述】：
我正在使用 Angular 2.0 TypeScript 和 d3.js 库来创建图形。我正在尝试在 asix 上应用 css （最重要的是 shape-rendering: crispEdges; ）。你有什么想法吗？
这里是代码
var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.scale.linear()
.range([MARGINS.left, WIDTH - MARGINS.right])
.domain([d3.min(this.calculationResults, function(d) { return d.time;}),
d3.max(this.calculationResults, function(d) { return d.time;})]),
yRange = d3.scale.linear()
.range([HEIGHT - MARGINS.top, MARGINS.bottom])
.domain([d3.min(this.calculationResults, function(d) { return d.force; }),
d3.max(this.calculationResults, function(d) { return d.force;})]),
xAxis = d3.svg.axis()
.scale(xRange)
.ticks(10)
.tickSize(5)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.ticks(10)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
和css代码
.axis path, .axis line
{
fill: none;
stroke: #777;
shape-rendering: crispEdges;
}
.tick
{
stroke-dasharray: 1, 2;
}
请分享你的答案:)
【问题讨论】：
-
你的路径和线路在哪里？你有 .axis path .axis line 但我看不到你在哪里创建这些......
-
嗨，这只是 asix 的一部分，不是所有功能
-
向我们展示整个代码，或者创建一个小提琴以便我们看到问题
-
这段代码从何而来？我猜的一个组件……它的封装模式是什么？
-
如果您认为它不是重复的，请添加评论以重新打开问题。