文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >如何让我的图表元素展开？它们目前都堆叠在一起

问如何让我的图表元素展开？它们目前都堆叠在一起
EN

Stack Overflow用户
提问于 2019-11-05 06:14:27
回答 2查看 32关注 0票数 1
关联问题
换一批

我正在尝试为我的svg图表创建g元素，但是它们都堆叠在一起，尽管我试图在它们上面设置一个变换距离。

我尝试过的事情:使用"setAttribute“为每个元素添加一个转换转换距离。这似乎没有起到任何作用。

代码语言：javascript
运行
AI代码解释
复制
        let tick = document.createElementNS(svg, "g");
        tick.setAttributeNS(svg, "transform", "translate("+ translateDistance +",0)");
        tick.setAttributeNS(svg, "class", "tick");

        let line = document.createElementNS(svg, "line");
        line.setAttributeNS(svg, "class", "y-axis-zero-line axis-line dash gray");
        line.setAttributeNS(svg, "x1", "-13");
        line.setAttributeNS(svg, "y1", "0");
        line.setAttributeNS(svg, "x2", "-13");
        line.setAttributeNS(svg, "y2", "240");
        tick.appendChild(line);

        let textDay = document.createElementNS(svg, "text");
        textDay.setAttributeNS(svg, "class", "label-day");
        textDay.setAttributeNS(svg, "dy", "0.71em");
        textDay.setAttributeNS(svg, "y", "-28");
        textDay.setAttributeNS(svg, "x", "0");
        let textDayNode = document.createTextNode(formattedLabels[i][0]);
        textDay.appendChild(textDayNode);
        tick.appendChild(textDay);

        let textTime = document.createElementNS(svg, "text");
        textDay.setAttributeNS(svg, "class", "label-time");
        textDay.setAttributeNS(svg, "dy", "0.71em");
        textDay.setAttributeNS(svg, "y", "-15");
        textDay.setAttributeNS(svg, "x", "0");
        let textTimeNode = document.createTextNode(formattedLabels[i][1]);
        textTime.appendChild(textTimeNode);
        tick.appendChild(textTime);

        totalXAxis.appendChild(tick);

下面是一个可编辑的示例：https://codepen.io/Finches/pen/RwwQOPY

预期的结果是刻度在图表的顶部被隔开。实际结果是刻度都堆叠在图表原点附近，就好像转换没有做任何事情一样。

有什么帮助吗？

javascript
svg
EN

回答 2

Stack Overflow用户

发布于 2019-11-05 06:38:32

您需要更改线路

代码语言：javascript
运行
AI代码解释
复制
tick.setAttributeNS(svg, "transform", "translate("+ translateDistance +",0)");

至

代码语言：javascript
运行
AI代码解释
复制
tick.style.transform = "translate("+translateDistance+"px)";

注意:你会注意到你的距离计算的错误，但至少事情是可以翻译的。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

票数 1
EN

Stack Overflow用户

发布于 2019-11-05 10:23:03

只有在创建新元素时才使用名称空间(const svg = "http://www.w3.org/2000/svg";)：

let tick = document.createElementNS(svg, "g");

在设置属性时，不使用名称空间。您可以改用null：

tick.setAttributeNS(null, "transform", "translate("+ translateDistance +",0)");

​

代码语言：javascript
运行
AI代码解释
复制
const labels = [
  ['Mon', '7 AM'],
  ['Tue', '7 AM'],
  ['Tue', '8 AM'],
  ['Tue', '9 AM'],
  ['Tue', '10 AM'],
  ['Tue', '11 AM'],
  ['Tue', '12 PM']
]

const xAxis = document.getElementById('total-x-ticks');

function createTotalLabels(labels, totalChartWidth, totalXAxis) {
  const hoursInterval = 1;
  const svg = "http://www.w3.org/2000/svg";

  let spacing = totalChartWidth / labels.length;
  let currentDay = '';
  
  const formattedLabels = labels.map((label, i) => {
    if (i % hoursInterval === 0) {
      if (label[0] !== currentDay) {
        currentDay = label[0];
        return [label[0], label[1]];
      }
      return ['', label[1]];
    }
    return ['', ''];
  });

  for (let i = 0; i < formattedLabels.length; i++) {
    let translateDistance;
    if (i === 0) {
      translateDistance = 15;
    } else {
      translateDistance = i * spacing + 15;
    }
    if (formattedLabels[i][1].length && i !== 0) {
      if (formattedLabels[i][0].length) {
        let tick = document.createElementNS(svg, "g");
        tick.setAttributeNS(null, "transform", "translate("+ translateDistance +",0)");
        tick.setAttributeNS(null, "class", "tick");

        let line = document.createElementNS(svg, "line");
        line.setAttributeNS(null, "class", "y-axis-zero-line axis-line dash gray");
        line.setAttributeNS(null, "x1", "-13");
        line.setAttributeNS(null, "y1", "0");
        line.setAttributeNS(null, "x2", "-13");
        line.setAttributeNS(null, "y2", "240");
        tick.appendChild(line);

        let textDay = document.createElementNS(svg, "text");
        textDay.setAttributeNS(null, "class", "label-day");
        textDay.setAttributeNS(null, "dy", "0.71em");
        textDay.setAttributeNS(null, "y", "-28");
        textDay.setAttributeNS(null, "x", "0");
        let textDayNode = document.createTextNode(formattedLabels[i][0]);
        textDay.appendChild(textDayNode);
        tick.appendChild(textDay);

        let textTime = document.createElementNS(svg, "text");
        textDay.setAttributeNS(null, "class", "label-time");
        textDay.setAttributeNS(null, "dy", "0.71em");
        textDay.setAttributeNS(null, "y", "-15");
        textDay.setAttributeNS(null, "x", "0");
        let textTimeNode = document.createTextNode(formattedLabels[i][1]);
        textTime.appendChild(textTimeNode);
        tick.appendChild(textTime);

        totalXAxis.appendChild(tick);
      } else {
        let tick = document.createElementNS(svg, "g");
        tick.setAttributeNS(null, "transform", "translate("+ translateDistance +",0)");
        tick.setAttributeNS(null, "class", "tick");

        let line = document.createElementNS(svg, "line");
        line.setAttributeNS(null, "class", "y-axis-zero-line axis-line dash gray");
        line.setAttributeNS(null, "x1", "-13");
        line.setAttributeNS(null, "y1", "0");
        line.setAttributeNS(null, "x2", "-13");
        line.setAttributeNS(null, "y2", "240");
        tick.appendChild(line);

        let textDay = document.createElementNS(svg, "text");
        textDay.setAttributeNS(null, "class", "label-day");
        textDay.setAttributeNS(null, "dy", "0.71em");
        textDay.setAttributeNS(null, "y", "-28");
        textDay.setAttributeNS(null, "x", "0");
        let textDayNode = document.createTextNode(formattedLabels[i][0]);
        textDay.appendChild(textDayNode);
        tick.appendChild(textDay);

        let textTime = document.createElementNS(svg, "text");
        textDay.setAttributeNS(null, "class", "label-time gray");
        textDay.setAttributeNS(null, "dy", "0.71em");
        textDay.setAttributeNS(null, "y", "-15");
        textDay.setAttributeNS(null, "x", "0");
        let textTimeNode = document.createTextNode(formattedLabels[i][1]);
        textTime.appendChild(textTimeNode);
        tick.appendChild(textTime);

        totalXAxis.appendChild(tick);
      }
    } else {
      let tick = document.createElementNS(svg, "g");
      tick.setAttributeNS(null, "transform", "translate("+ translateDistance +",0)");
      tick.setAttributeNS(null, "class", "tick");

      let textDay = document.createElementNS(svg, "text");
      textDay.setAttributeNS(null, "class", "label-day");
      textDay.setAttributeNS(null, "dy", "0.71em");
      textDay.setAttributeNS(null, "y", "-28");
      textDay.setAttributeNS(null, "x", "0");
      let textDayNode = document.createTextNode(formattedLabels[i][0]);
      textDay.appendChild(textDayNode);
      tick.appendChild(textDay);

      let textTime = document.createElementNS(svg, "text");
      textDay.setAttributeNS(null, "class", "label-time");
      textDay.setAttributeNS(null, "dy", "0.71em");
      textDay.setAttributeNS(null, "y", "-15");
      textDay.setAttributeNS(null, "x", "0");
      let textTimeNode = document.createTextNode(formattedLabels[i][1]);
      textTime.appendChild(textTimeNode);
      tick.appendChild(textTime);

      totalXAxis.appendChild(tick);
    }
  }
}

createTotalLabels(labels, 500, xAxis);
代码语言：javascript
运行
AI代码解释
复制
.container {
  width: 500px;
}

svg .bar {
  fill: #4a93ff;
}
svg .axis {
  font: 11px 'Solis';
}
svg .axis path,
svg .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
svg .x.axis path {
  display: none;
}
svg .axis-line {
  stroke-width: 1px;
}
svg .axis-line.dash.gray {
  stroke-dasharray: 4;
  stroke-width: 1;
}
svg .tick {
  opacity: 1;
}
svg .tick text {
  text-anchor: middle;
}
svg .tick line.gray,
svg line.gray {
  stroke: rgba(0, 0, 0, 0.2);
}
svg .label-day,
svg .y-tick {
  font-weight: bold;
}
svg .label-time {
  font-weight: normal;
}
svg .label-time.gray {
  fill: #878787;
}
代码语言：javascript
运行
AI代码解释
复制
<div class="container">
  <svg id="total-chart" height="285" width="100%">
			<defs>
				<linearGradient id="total-gradient" gradientTransform="rotate(90)">
					<stop offset="0" stop-color="rgba(76, 150, 254, 1.00)" />
					<stop offset="0.5" stop-color="rgba(76, 150, 254, 0.50)" />
					<stop offset="1" stop-color="rgba(209, 225, 250, 0.1)" />
				</linearGradient>
			</defs>
			<g transform="translate(32,40)">
				<g class="y axis" id="total-y-ticks">
					<line
						class="y-axis-zero-line axis-line"
						id="y-axis-zero-line-total"
						x1="0"
						y1="0"
						x2="0"
						y2="240"
					/>
				</g>
				<g>
					<polygon id="total-chart-polygon" fill="url('#total-gradient')" />
				</g>
				<g class="x axis"
					id="total-x-ticks"
					transform="translate(0,0)"
				>
					<line
						class="x-axis-zero-line axis-line"
						id="x-axis-zero-line-total"
						x1="0"
						y1="240"
						x2="600"
						y2="240"
					/>
				</g>
			</g>
		</svg>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/58705458

复制
相关文章
Elasticsearch——禁止Body中的index覆盖Url中的index参数
es 2
本篇继续一下Elasticsearch日常使用的技巧翻译。 在Elasticsearch有很多的api支持在body中指定_index等信息，比如mget或者msearch以及bulk。 默认的情
用户1154259
2018/01/17
2.8K0
Elasticsearch 8.x中不再支持URL中的type参数
网络安全Elasticsearch Service
{"error":{"root_cause":[{"type":"illegal_argument_exception","reason":"The mapping definition cannot be nested under a type [_doc] unless include_type_name is set to true."}],"type":"illegal_argument_exception","reason":"The mapping definition cannot be nested under a type [_doc] unless include_type_name is set to true."},"status":400}
友儿
2022/09/11
1.6K0
Elasticsearch之_default_—— 为索引添加默认映射
数据库es 2
前篇说过，ES可以自动为文档设定索引。但是问题也来了——如果默认设置的索引不是我们想要的，该怎么办呢？ 要知道ES这种搜索引擎都是以Index为实际的分区，Index里面包含了不同的类型，不同的类型是逻辑上的分区；每种类型可能包含有相同的字段，如果字段的类型相同还好，如果不同....那就会导致字段的冲突了。 本篇就讲述如何使用REST API以及Logstash设置默认的索引。 更多内容参考：Elasticsearch知识汇总 使用Rest API设置默认的索引 首先先看一下不设置默认索引时，我
用户1154259
2018/01/17
1.1K0
elasticsearch常用操作url 原
es 2
删除index curl -XDELETE '172.16.40.4:9200/ {index}?pretty' 查看状态 curl 'localhost:9200/_cat/health?v' 节点
尚浩宇
2018/08/17
3980
5.16.2-如何在CDH中安装ElasticSearch
jqueryElasticsearch Serviceparcelhttpapache
1.将csd文件ELK-YX-20200617-1.0-SNAPSHOT.jar放置在cloudera-scm-server服务的csd目录下
Fayson
2020/08/03
2K1
如如何基于Docker快速搭建Elasticsearch集群？
node.jsElasticsearch Servicees
Elasticsearch 作为一个搜索引擎，我们对它的基本要求就是存储海量数据并且可以在非常短的时间内查询到我们想要的信息。所以第一步我们需要保证的就是 Elasticsearch 的高可用性，什么是高可用性呢？它通常是指，通过设计减少系统不能提供服务的时间。假设系统一直能够提供服务，我们说系统的可用性是 100%。如果系统在某个时刻宕掉了，比如某个网站在某个时间挂掉了，那么就可以它临时是不可用的。所以，为了保证 Elasticsearch 的高可用性，我们就应该尽量减少 Elasticsearch 的不可用时间
码农架构
2020/10/26
5570
如如何基于Docker快速搭建Elasticsearch集群？
Elasticsearch：如何把 Elasticsearch 中的数据导出为 CSV 格式的文件
大数据Elasticsearch Service
本教程向您展示如何将数据从 Elasticsearch 导出到 CSV 文件。 想象一下，您想要在 Excel 中打开一些 Elasticsearch 中的数据，并根据这些数据创建数据透视表。 这只是一个用例，其中将数据从 Elasticsearch 导出到 CSV 文件将很有用。
腾讯云大数据
2020/09/10
6.6K0
Elasticsearch：如何把 Elasticsearch 中的数据导出为 CSV 格式的文件
Elasticsearch - 闲聊ElasticSearch中的分页
elasticsearch分页排序数据搜索
ElasticSearch是一款强大的搜索引擎，它能够帮助我们快速地搜索海量数据。然而，在处理大量数据时，ElasticSearch的性能可能会受到影响。其中一个常见的问题是深度分页，也就是当我们需要获取大量数据时，ElasticSearch需要处理的数据量太大，导致性能下降。
小小工匠
2023/08/16
4160
Elasticsearch - 闲聊ElasticSearch中的分页
Elasticsearch：Elasticsearch 中的慢日志
大数据Elasticsearch Service
Shard 级慢速搜索日志允许将慢速搜索（查询和获取阶段）记录到专用日志文件中。日志记录是任何应用程序不可缺的一部分。 对于像 Elasticsearch 这样的分布式解决方案，它必须处理大量的请求，因此日志记录不可避免，其重要性至关重要。
腾讯云大数据
2020/10/28
5.3K0
Elasticsearch：Elasticsearch 中的慢日志
Elasticsearch 添加索引返回406
documentelasticsearch索引
Elasticsearch 添加索引返回406 Index and Query a Document 使用如下命令进行添加索引时，将会返回 406 curl -XPUT localhost:9200/
hedeqiang
2019/12/17
1.5K0
Elasticsearch：Elasticsearch 中的数据强制匹配
大数据Elasticsearch Service
在实际的使用中，数据并不总是干净的。 根据产生方式的不同，数字可能会在 JSON 主体中呈现为真实的 JSON 数字，例如 5，但也可能呈现为字符串，例如 “5”。 或者，应将应为整数的数字呈现为浮点数，例如 5.0，甚至是 “5.0”。
腾讯云大数据
2020/10/29
3.4K0
Elasticsearch：Elasticsearch 中的数据强制匹配
Elasticsearch 6 重要参数配置
Elasticsearch Servicejvmlinux
采用zip或tar.gz的二进制包方式安装的ES，需要配置一系列参数，通过阅读官方文档了解到其中重要参数的配置及其说，下面将逐步进行了解。
俊才
2019/08/08
1.6K0
如何在intellij idea中调试elasticsearch源代码
Elasticsearch Service
本文以Elasticsearch 6.6 为例，介绍使用IDEA调试Elasticsearch源码的方法。
用户1233856
2022/08/06
2.3K0
Elasticsearch 8.X 如何动态的为正文添加摘要字段？
Elasticsearch Service
例如我现在有一个file_data字段，字段长度可能在一千以上并且需要对这个字段分词和检索，目前想指定返回file_data字段的前50字符，请问有没有什么好的方法？
铭毅天下
2022/09/26
1.1K0
Elasticsearch 8.X 如何动态的为正文添加摘要字段？
Elasticsearch 重要mapping参数详解(三)
全文检索
我们先来看一下一些常用的参数的简介，大致明白这些参数的含义，后面会对一些重要的参数做一个更加详细一些的说明。
问道白发
2019/12/15
6.7K2
Elasticsearch 重要mapping参数详解(三)
翻译：如何在intellij idea中调试elasticsearch源代码
Elasticsearch Service
如果想了解Elasticsearch的内部工作原理，源代码是最终的权威。如果源代码已经下载，那么像IntelliJ IDEA这样功能齐全的集成开发环境（IDE）对于浏览、编辑和调试它非常有用。因此，在这篇博客文章中，我介绍了（1）如何下载Elasticsearch源代码，（2）如何在IntelliJ IDEA中设置Elasticsearch项目，以及（3）如何在IntelliJ IDEA中启动Java调试器。
用户1233856
2022/08/06
1.9K0
Elasticsearch：透彻理解 Elasticsearch 中的 Bucket aggregation
大数据Elasticsearch Service
Elasticsearch 除了在搜索方面非常之快，对数据分析也是非常重要的一面。正确理解 Bucket aggregation 对我们使用 Kibana 非常重要。Elasticsearch 提供了非常多的 aggregation 可以供我们使用。其中 Bucket aggregation 对于初学者来说也是比较不容易理解的一个。在今天的这篇文章中，我来重点讲述这个。
腾讯云大数据
2020/10/13
2.7K0
Elasticsearch：透彻理解 Elasticsearch 中的 Bucket aggregation
ElasticSearch 23 种映射参数详解
Elasticsearch Serviceanalyzerspringspring boot编程算法
松哥原创的 Spring Boot 视频教程已经杀青，感兴趣的小伙伴戳这里-->Spring Boot+Vue+微人事视频教程
江南一点雨
2020/11/26
8820
如何在 TypeScript 中为对象动态添加属性？
typescript
在 TypeScript 中，我们经常需要在运行时动态添加属性到对象上。这是因为 TypeScript 是一种静态类型语言，类型系统在编译时会检查代码的类型安全性，所以在编译时我们无法确定对象上将要添加哪些属性。在本文中，我们将讨论如何在 TypeScript 中为对象动态添加属性，以及这样做的一些注意事项。
网络技术联盟站
2023/06/07
11.8K0
点击加载更多

相似问题

elasticsearch updateByQuery语法如何工作

110

如何在ElasticSearch DeleteByQuery java中添加url参数？

11

Elasticsearch UpdateByQuery索引刷新问题

17

elasticsearch updateByQuery没有更新，但返回200

10

elasticsearch.js: updateByQuery如果存在，则插入

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文