svg = d3.select("#svg1");

这是我在页面上已经有这个元素了。也可以使用其他的方式。

比如使用enter()函数。使用它的前提是使用data（）函数。根据data()函数传入的参数个数，enter（）函数可以自动补齐页面尚不存在的svg元素。

同样的，如果想要根据数据动态地生成元素，也可以使用enter()，不是仅仅局限于对svg才可使用。

data（）函数的参数是一个数据集，其结构可以是哈希的——对不起，我就是喜欢把它叫成哈希╭(╯^╰)╮——所以可以根据自己的需要，添加各种键值对。在后续创建元素中，动态地进行赋值。具体可以看下面第三条。

2 设置attribute

d3.js添加attribute使用的是attr(name, value)方法，这个方法适用于设置画布高度、设置元素坐标等

1）设置高度，宽度

可应用于画布和图中的各个元素宽高

svg.attr("width", width)                //设定宽度

.attr("height", height);        //设定高度

2）设置坐标 （x，y）：

svg.selectAll('g').data(dataset)
		  .enter()
		  .append("g")
		  .append("rect")
.attr("x",function(d,i){//每个矩形的起始x坐标
				var x = parseInt(d['x']);
				return x.toString();
		  })//每个矩形的起始x坐标
		.attr("y",function(d,i){//每个矩形的起始y坐标
				var y = parseInt(d['y']);
				y = -1 * y; // 注意d3的象限，如果不将y坐标取反，有可能图跟你想要的是上下翻转的。
				return y.toString();
3. 设置内联样式
 
内联样式的设置使用函数style(name, value)。适用于画布背景颜色、元素填充颜色、边框宽度和颜色等等。
 
应该凡是可以写进内联样式的样式，都可以这么添加吧。
 
举几个例子：
 
1）设置边框宽度和颜色：
 
          .style("storke-width", "0.2") //宽度
           .style("stroke","#bababa")//颜色
 
2）设置填充颜色：
 
.style("fill",function(d){
                    return  d['color'];
           })
 
3 文字设置
 
想要在矩形框中间写上文字，需要这样做：
 
首先明确结构。想要让文字显示在矩形上，必须要将矩形元素和对应的text元素括在同一个g元素当中，形如：
 
<g xmlns="http://www.w3.org/2000/svg">
 
    <rect style="fill: XXX; stroke: XXX;" x="0" y="0" width="5" height="5" />
 
    <text style="font-size: XXX" x="XXX" y="XXX">abc</text>
 
因此我们需要先创建矩形框，然后创建对应的文字元素。
 
第一步，创建矩形框：
 
	svg.selectAll('g').data(dataset)
		  .enter()//根据dataset来自动生成g元素
		  .append("g")  //这个是必须的。rect和对应的text元素要被同一个g元素包含住
		  .append("rect")
		.attr("x",function(d,i){//每个矩形的起始x坐标
                var x = parseInt(d['x']); //这里的d就是dataset
				return x.toString();
		.attr("y",function(d,i){//每个矩形的起始y坐标
			return d['y'];
		.attr("width", die_width)
		.attr("height",die_height)//每个矩形的高度
		.style("fill",function(d){//每个矩形的颜色
		   		return  d['color'];
		  .style("storke-width", "0.2") //边框宽度
		  .style("stroke","#bababa")
//如果有其他需要的attribute或者内联样式，可以继续往上添加
第二步，创建text元素
 
创建text元素使用的是text()方法。
 
当然，除了让text元素和rect元素都放在g元素里之外，还需要让二者的坐标匹配——不是要求它俩必须一样，二者的坐标是分开设置的，所以如果设置不对，即使他们在一个g里头，文字也可能飞到天边外国去……
 
   //setup text on each die (which means on each ret)
    svg.selectAll('g').data(dataset)// 这三件套必须重新写一遍！不能直接接着前面生成rect元素的来
    .append('text')  //生成text元素。注意，这里就不要再加.enter()了
    .attr("x",function(d,i){//每个矩形的起始x坐标
            //...
		.attr("y",function(d,i){
            //...
		  }).text(function(d) { //添加文字描述
        return d['text'];
            .style("font-size", "50%")//设置文字大小
// 同样，需要其他attr和内联样式，可以自己添加
效果大概是这样的：
 
                    1 设置svgsvg = d3.select("#svg1");这是我在页面上已经有这个元素了。也可以使用其他的方式。比如使用enter()函数。使用它的前提是使用data（）函数。根据data()函数传入的参数个数，enter（）函数可以自动补齐页面尚不存在的svg元素。同样的，如果想要根据数据动态地生成元素，也可以使用enter()，不是仅仅局限于对svg才可使用。...
				
svg.inliner.js
 将所有链接的 SVG 图像替换为用于 DOM/CSS 操作的内联版本。
 可用作导出单个函数 (SVGInliner) 的 UMD 模块，该函数将可选的 CSS 选择器作为参数。 默认行为会转换在页面上找到的所有 SVG 图像。
 尚未（尚未）在 Internet Explorer 上进行测试。
 有关实时演示，请参见 example.html。 （必须通过 HTTP 服务器访问，如嵌入式 grunt-connect）
 许可麻省理工学院
				
1、下载d3.js和d3.layout.cloud.js，下载地址忘了，自己上网找，这里将d3.layout.cloud.js的代码贴出：
// Word cloud layout by Jason Davies, http://www.jasondavies.com/word-cloud/
// Algorithm due to Jonathan Feinberg, http://sta
				
背景：项目中用 d3 画的 heatmap 想把横坐标的一组 text 旋转 45deg ...    遇到的问题： 设置transform会让x轴的text整体都旋转 而不是每个都旋转...解决办法：    让每个text旋转的起点为相应的x起点，而不是最左边的起始点代码如下：var timeLabels = svg.selectAll(".testLabel")
				
一.代码示例
&amp;amp;lt;!DOCTYPE html&amp;amp;gt;
&amp;amp;lt;html lang=&amp;quot;zh-cn&amp;quot;&amp;amp;gt;
&amp;amp;lt;head&amp;amp;gt;
    &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt;
相信大家都知道在SVG中添加文本是使用text元素。但这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？下面通过这篇文章来给大家详细介绍下实现的过程。
一、文字换行是什么问题？
现有一字符串：
			var str = "云中谁寄锦书来，雁字回时，月满西楼";
		李清照的一剪梅，读过吗？
在body里添加一个svg元素，大小如下：
var links = [
  {source: "Microsoft", target: "Amazon", type: "licensing"    ,weight:1,color:1},   
  {source: "Microsoft", target: "HTC", type: "licensing"       ,weight:3,color:4},
				
在 ag-grid 中使用 Vue，可以使用 `cellStyle` 和 `cellClass` 属性来设置单元格的样式。
`cellStyle` 可以用来设置单元格的内联样式，可以使用 JavaScript 对象来定义样式。
<ag-grid-vue 
  :columnDefs="columnDefs"
  :rowData="rowData"
  :gridOptions="gridOptions">
</ag-grid-vue>
data() {
  return {
    columnDefs: [
      {headerName: 'Name', field: 'name', cellStyle: {'background-color': 'red'}},
    rowData: [
      {name: 'John Smith'},
    gridOptions: {},
`cellClass` 则可以用来指定单元格使用哪个 CSS 类，可以是一个字符串或者一个返回字符串的函数。
<ag-grid-vue 
  :columnDefs="columnDefs"
  :rowData="rowData"
  :gridOptions="gridOptions">
</ag-grid-vue>
data() {
  return {
    columnDefs: [
      {headerName: 'Name', field: 'name', cellClass: 'my-cell-class'},
    rowData: [
      {name: 'John Smith'},
    gridOptions: {},
在 css中：
.my-cell-class {
  background-color: red;
也可以使用函数来返回一个字符串来实现动态类的添加
cellClass: function(params) {
    if (params.value === "type1") {
      return "type1";
    } else if (params.value === "type2") {
      return "type2";
    } else {
      return null;
这些配置可以在行内单元格级别来使用也可以在列级别使用
                    m0_46900715: 
                    你好，你用的django是django的哪个版本，我现在在django3.2的工程里，发现是用不了这种myapp.apps.py的这种设定的，因为这样使用以后，将其注册到INSTALLED_APPS以后，会导致models.py里的模块加载不出来，就像这样，[code=python]
INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'mozilla_django_oidc',  # Load after auth
    'django_statsd',
    'webapps.api',
    'webapps.apidocs',
    'webapps.build.apps.BuildConfig',
[/code]
[code=python]
from django.apps import AppConfig
from django.db import migrations
class BuildConfig(AppConfig):
    name = 'build'
    def ready(self):
        from . import signals  # NOQA
[/code]
执行命令，python3 manage.py createsuperuser 的时候，就会说，[code=python]
RuntimeError: Model class webapps.build.models.Site doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.
[/code] 所以，我最后不得不放弃这中apps.py的使用