时间戳

首页 > 解决方案 > 无法让 AngularJS 和 D3 更改标题颜色

typescript - 无法让 AngularJS 和 D3 更改标题颜色

问题描述

我是 Angular 和 d3 的新手，因此对这个问题的基本性质表示歉意。页面显示正常，但 h1 标题不改变颜色。我正在使用视觉工作室代码。谢谢。

app.component.html

<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3-selection.v1.min.js">

d3.select('h1').style('color', 'darkblue');

function myFunction() {
    var elem = document.getElementById('my-div');
    elem.style.color = 'blue';
}
</script>
</head>

<div id="my-div" style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

app.component.ts

import { Component } from '@angular/core';
import * as d3 from 'd3';

//d3.select('h1').style('color', 'darkblue');


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-d3-app';
}

标签： typescript

解决方案

您<script>在 html 的其余部分加载之前正在运行，因此d3.select('h1').style('color', 'darkblue');执行时<h1>还不存在。

HTML 在加载时从文档顶部向下执行。因此，要使其正常工作，您需要将脚本放在以下位置：

<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
</head>

<div id="my-div" style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<script>
    d3.select('h1').style('color', 'darkblue');

    function myFunction() {
        var elem = document.getElementById('my-div');
        elem.style.color = 'blue';
    }
</script>

编辑：注意，由于您使用的是 Angular 之类的数据绑定框架，因此在模板中操作 DOM 的运行脚本是一种反模式。在角度组件中执行此操作会更好，例如：

ngAfterContentInit() {

 d3.select('h1').style('color', 'darkblue');
}

看看这里和这里的一些指南。

推荐阅读