小编Abd*_*eed的帖子

我正在使用svg元素创建图表.我正在向他们应用事件处理程序.事件按预期工作,但我有一个问题,因为有时其中一个元素直接在另一个元素之上,所以当底部元素的事件应该被触发时,它不会.如果你看下面的图片,我有rect一个zoom事件.变焦event会在mouse-wheel发生时触发rect,但当圆圈覆盖它时,不会触发事件.我必须拥有它circles,rect以便在需要时可以点击它们.我怎么可能解决这个问题.我尝试在这里搜索解决方案SO,但找不到任何特定于此问题的内容.

我有一个显示圈子的JSFiddle.如果您在圆圈之外的任何位置进行缩放,则会触发缩放行为,但如果您尝试在圆圈顶部进行缩放,则缩放行为将不起作用.

我有一个d3＆Ionic项目，可以在github上找到。我没有创建Plunkr，因为该错误必须通过android模拟器或android设备重现。

我有一个平移和缩放的图形。我试图一次在图表中保留约60个数据点。当用户到达“边缘”时，表示域和数据点之间的距离约为2，那么我将刷新数据，并基于新域删除和添加数据。在异步调用之前，似乎缩放变得混乱，并且平移导致缩放就像我在捏一样。平移时重绘图形时会发生这种情况。我不知道为什么。

我正在使用Ionic和d3：这是我的缩放代码的外观

图形代码

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Content, LoadingController, NavController, PopoverController } from 'ionic-angular';

import { UsageLayer } from './usage-layer';
import { Observable } from 'rxjs/Rx';
import { UsageService } from './usage.service';

import * as Utils from './utils';
import * as d3 from 'd3';
import *  as moment from 'moment';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,private el: ElementRef,private usageService: UsageService) {}
        //public properties …

目前我正在使用Ionic 2.0.0-beta.37.其中使用的是typescript 1.8.x. 我正在尝试使用打字稿的D3版本4,但d3-v4-definitelytyped的类型使用Typescript 2.x. 我在打字时遇到编译错误,在d3-v4-definitelytyped repo上发出问题后,我了解到我需要在Ionic 2项目中使用TS 2.x.

这是我得到的错误:

TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-axis/index.d.ts(150,30): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-axis/index.d.ts(167,24): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-axis/index.d.ts(173,55): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-axis/index.d.ts(191,24): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-brush/index.d.ts(30,37): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-chord/index.d.ts(38,56): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-chord/index.d.ts(39,25): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-chord/index.d.ts(41,59): Error TS1110: Type expected.

我查看package.json了我的主IONIC目录中的文件,我没有看到typescript作为依赖项,所以我认为它正在使用其他东西来定义版本.我知道了:

• "ionic-gulp-browserify-typescript":"2.0.0"
• "tslint-ionic-rules":"^ 0.0.3"
• "tsify":"0.16.0"

所以我进去 …

我有一个图表，d3.radialLine可以在这个fiddle 中看到。通过在适当的轴值上绘制圆圈来可视化我线上的数据点。我需要在 svg 元素的中间有一条线，它可以让我读取接触它的绘制数据点。您可以看到我正在尝试完成的图形图像：

我想以编程方式旋转，例如顺时针旋转，以便十二月与红线对齐，并且能够读取该数据点。我知道我必须获得x2红线的值并使用 12 月值的“x2”来找出我需要旋转图形的度数，但我似乎无法弄清楚那部分。代码取自Radar Chart。

我知道旋转的公式..d3.select(...).attr('transform', 'rotate(degree, x, y)'

代码

            ////////////////////////////////////////////////////////////// 
            //////////////////////// Set-Up ////////////////////////////// 
            ////////////////////////////////////////////////////////////// 

            var margin = {top: 100, right: 100, bottom: 100, left: 100},
                width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
                height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);

            ////////////////////////////////////////////////////////////// 
            ////////////////////////// Data ////////////////////////////// 
            ////////////////////////////////////////////////////////////// 

            var data = [
                      // Yearly
                      [{axis:"Jan",value: 700},
                      {axis:"Feb",value: 1453},
                      {axis:"March",value: 1300},
                      {axis:"April",value: 1534},
                      {axis:"May",value: 1534},
                      {axis:"June",value: …

我正在使用d3.js v4.我目前正在实施程序化缩放.这种平移和缩放教程有很大帮助.我的缩放适用于滚轮,但我想创建缩放按钮.我知道缩放和平移的必要条件是翻译[tx, ty]和比例因子k.我正在为x-Axis使用时间刻度.我已经成功地获得tx和比例因子k,通过获取的像素值p1 (point 1),并p2(point 2)在x轴,然后使用这些值来获得AK(比例系数).像这样:

var k = 500 / (xScale(p2) - xScale(p1)); //500 is desired pixel diff. between p1 and p2, and xScale is my d3.scaleTime() accessor function.
// for this zoom i just want the first value and last value to be at scale difference of the entire width.

然后我用这个计算tx:

var tx = 0 - k * p1;

然后将它喂入d3.zoomIdentity()并重新调整我的xdomain.我创建了一个缩小按钮的按钮.问题是当我放大然后尝试使用按钮缩小时,它会缩小,但缩小x轴.我似乎无法找到为什么它缩小x轴而不是正确缩小. …

我有一个在Canvas中实现的d3图。图形性能在Chrome中很棒，但是当我使用Ionic（webview）部署它时，缩放和平移重绘在android上确实非常惊人，而在iOS上甚至更慢。

我最初是使用SVG开发该图的，但是在确信画布可以更平滑地运行之后切换到了画布。

设定码

的HTML

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <canvas width="300" height="300"></canvas>
</ion-content>

画布初始化

  mode = 'monthly';

  canvas = document.querySelector("canvas");
  context = canvas.getContext("2d");

  margin = { top: 20, right: 20, bottom: 30, left: 50 },
      width = canvas.width - margin.left - margin.right,
      height = canvas.height - margin.top - margin.bottom;

  var parseTime = d3.timeParse("%d-%b-%y");

  // setup scales
  x = d3.scaleTime()
      .range([0, width]);
  x2 = d3.scaleTime().range([0, width]);
  y = d3.scaleLinear()
      .range([height, 0]);

  // setup domain
  x.domain(d3.extent(data, function …