Angular 2.0 和 D3.js 不在 svg 上应用 Css [重复]

Posted 2023-03-06

【中文标题】Angular 2.0 和 D3.js 不在 svg 上应用 Css [重复]

【英文标题】：Angular 2.0 & D3.js don't apply Css on svg [duplicate]

【发布时间】：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 的一部分，不是所有功能

向我们展示整个代码，或者创建一个小提琴以便我们看到问题

这段代码从何而来？我猜的一个组件……它的封装模式是什么？

如果您认为它不是重复的，请添加评论以重新打开问题。

【参考方案1】：

我不确定，但这应该对你有帮助，

封装方式

和/或

穿透 CSS 组合子 >>>, /deep/ 和 ::shadow

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

祝你好运！