npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

d3chart.api-factory

v0.0.2

Published

API factory for d3chart

Downloads

14

Readme

d3chart.api-factory

[CN] d3chart 图表 API 接口生成器;

通用 API 说明 (使用者)

.init(element)

图表初始化的入口,如果在实例化时已有正常的 DOM 入参,则在实例化时就会初始化; 只能初始化一次;

.setOptions(options)

更新 options 配置,结构如:

var options = {
    animation: false,
    chart: {
        itemStyle: {
            normal: {
                color: '#666'
            }
        }
    }
};

当更新某些配置时,还需要手动触发图表的重绘,比如:

barApi.setOptions(options).render();

当然,也可以通过配置 options.autoRender=true 来实现自动重绘;

.setData(data, notClean)

更新数据;具体图表需要的数据结构,请参考其说明页;

.render()

绘制/重绘图表,会连同 options 及 data 一起作用重绘图表;应用场景如:

barApi.setOptions(options)
    .render();
// 又比如
barApi.setData(data)
    .render();
// 再比如
barApi.setOptions(options)
    .setData(data)
    .render();

当然,也不是必须要每次手动触发 render;可以通过配置 options.autoRender=true 来实现自动触发绘制;但是出于性能提升考虑,上例的第三个手动只触发一次 render,但是自动可能会触发两次 render;

.resize()

该表图表的大小;应用场景如:@element 大小变化时,需要实时调整图表的大小;我们建议在触发图表 resize 时采用延迟策略,避免不必要的重绘,如:

// 定时器
var timer = null;
window.onresize = function () {
    timer && clearTimeout(timer);

    timer = setTimeout(function () {
        // TODO 调整 @element 的大小,如果需要的话

        barApi.resize();
    }, 100);
};

.destroy()

销毁图表,包括:文档中的 DOM、对内存的占用、图表实例;

如果异步队列中还存在未执行完的更新操作,会等待队列结束后再销毁;