Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2.0和D3.js不对svg应用Css大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Styles in component for D3.js do not show in angular 2                                    6个
我正在使用Angular 2.0 TypeScript和d3.js libary来创建grafic.我正在尝试在asix上应用css(大多数importand 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; }),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;
}

分享你的答案:)

解决方法

我不确定,但这对你有帮助,

封装模式

和/或

刺穿CSS组合器>>>,/ deep /和:: shadow

看这里 – Styles in component for D3.js do not show in angular 2

好运 !

大佬总结

以上是大佬教程为你收集整理的Angular 2.0和D3.js不对svg应用Css全部内容,希望文章能够帮你解决Angular 2.0和D3.js不对svg应用Css所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。