Mpld3: 브라우저/HTML은 figsize * dpi가 아닌 그림 크기를 지정합니다.

나는 당신이 무엇을 요구하는지 잘 모르겠습니다 ... 우리는 matplotlib 그림에서 그림 크기를 인치 단위로 얻고 matplotlib 그림에서 dpi도 얻습니다. 우리가 이것을 어떻게 바꿀 것을 제안합니까? 감사 해요

Python에 설정된 절대 그림 크기를 사용하는 대신 다음과 같은 의미입니다.

<div id='parent' class='figsizeinfo'>
//mpld3 generated code
</div>

여기서 figsizeinfo는 CSS 크기 사양이고 mpld3은 div를 채웁니다. (내 경험상 이것이 flotjs가 작동하는 방식입니다)

흠... 이 질문은 웹에 대한 경험이 없다는 것을 드러내는 것일 수 있지만 SVG(mpld3이 사용하는)는 완전히 픽셀 기반이며 쉽게 변경할 수 없다고 생각했습니다. flotjs는 SVG 또는 다른 사양을 사용합니까?

SVG(Scalable Vector Format) 그래픽은 픽셀 기반이 아니라 벡터 기반입니다.

다음은 창 크기에 따라 확장되는 바닐라 matplotlib로 생성된 SVG 이미지의 예입니다.

http://bleepshow.pithy.io/SVG_Example

(귀하의 예를 분명히 언급함)

d3js와 모든 캔버스 그림은 내가 이해하는 한 벡터이므로 이 작업을 수행할 수 있어야 합니다.

내가 생각하는 비결은 설정하는 것입니다.

figwidth = $(“#parent”).width //(jquery based, but you get the point )

보다는

figwidth = figsize[0] * dpi;

네, SVG가 벡터 기반이라는 것을 압니다. 하지만 제가 착각하지 않는 한 캔버스의 크기와 마커의 크기와 화면에서의 위치는 포인트로 측정됩니다. 임의의 창 크기를 가진 임의의 그림에 대해 올바르게 확장되는 SVG 코드를 작성하는 것은 매우 복잡할 것 같습니다.

아니, 꽤 쉽습니다.

다음은 fig_to_d3 코드에 적용한 해킹입니다.

print mpld3.fig_to_d3(fig).replace("\n","\r").replace("var figwidth = 8.0 * 80","var figwidth = $(window).width()*.9;").replace("var figheight = 6.0 * 80","var figheight = $(window).height()*.9;")

다음과 같이 나타납니다.

http://bleepshow.pithy.io/mpld3_window_scale_test

이제 레이블이 잘못된 위치에 있지만 다시 "그냥" 그림에 대한 위치가 아니라 div에 대한 참조의 문제입니다. 그러나 그림의 렌더링은 내가 말할 수 있는 한 잘 작동합니다.

(새로 고침을 하지 않으면 크기가 조정되지 않지만 약간의 접착제를 사용하면 간단합니다.)

저는 현재 이 솔루션을 기반으로 제리 리깅을 하고 있습니다. 끌어오기 요청에 적합한 것으로 개선하려고 노력하고 있습니다.

mpld3 그림의 응답 크기는 정말 유용할 것입니다. 현재 Figure를 새 창으로 열 수 있도록 버튼(도구 모음에서)으로 이것을 추가하면 전체 Figure의 크기를 쉽게 조정할 수 있습니다.

+1

@hadim "파이썬"으로 유지하고 싶습니다.

mpld3.fig_to_d3(fig,size="adaptive")

좋은 방아쇠가 될 것입니다

나는 동의한다 !

그림을 다른 크기로 만드는 것이 쉽다는 것을 이해합니다. 그러나 전반적으로 나는 여전히 그것이 좋은 생각인지 확신하지 못합니다. 그림 크기가 수정되면 모든 선 너비, 마커 위치, 마커 크기, 글꼴 크기 등을 해킹해야 하므로 많은 이점 없이 코드에 많은 복잡성이 추가됩니다. 또한 범례, 축 레이블 및 기타 속성의 올바른 배치는 plt.draw() 명령에 따라 달라집니다. plt.draw() 명령은 내부 그림 크기와 dpi 설정을 기반으로 가정합니다. - 사실 이후 조정.

이 mpld3의 철학은 matplotlib 수치에 있는 내용을 가능한 한 가깝게 반영하는 간단한 출력을 생성하는 것입니다. 출력 Figure의 크기를 변경하려는 경우 선호하는 방법은 matplotlib Figure 크기를 조정하는 것입니다. 다른 모든 것은 구현, 테스트 및 유지 관리하는 데 큰 골칫거리가 될 것 같습니다.

플러그인은 어떻습니까?

plugins.connect(fig, plugins.ResponsiveSize())

플러그인이 아마도 좋은 방법일 것입니다. 그러나 다시 글꼴 크기, 선 너비, 마커 크기, 범례 위치 및 축 텍스트 위치를 조정하는 방법은 무엇입니까? 이러한 모든 문제 때문에 크기 조정을 지원하는 광범위한 인프라가 없으면 그러한 플러그인의 유용성이 매우 제한적일 것이라고 생각합니다.

@jakevdp 동의하지 않습니다. 위의 3초 해킹에서 겪은 유일한 문제는 레이블 위치였으며 다시 말하지만 더 나은 자바스크립트를 작성하는 문제입니다. DOM은 많은 작업 없이 절대 위치와 상대 위치를 허용합니다.

코드가 지금 구현되는 방식으로 모든 것이 그림에 하드 코딩됩니다. 약간의 작업으로 너비/높이, 선 두께 및 글꼴 크기를 div 크기에 대해 선형으로 조정할 수 있습니다. 가장 까다로운 부분은 종횡비이며 잠글 수 있습니다. 가로 세로 비율이 고정되면 모든 것을 선형으로 확장하는 것이 매우 간단합니다.

@hadim 좋은 생각입니다.

나는 d3.js를 몰라서 아무 생각이 없습니다. 하지만 우리는 sv 파일을 작업하고 있기 때문에 쉽게 할 수 없을 것이라고 생각합니다...

그것을 만드는 가장 좋은 방법에 대해 생각하기 시작하는 몇 가지 링크:

• http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/
• http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive
• http://www.triballabs.net/2013/02/the-basics-of-responsive-d3-charts/

@dansteingart의 경우 +1입니다. 모든 SVG 내부 길이와 위치를 상대 좌표로 설정한 다음 출력 전에 viewBox를 사용하여 전체 그림의 크기를 조정하고 figsize matplotlib 매개변수와 일치시키십시오(또는 다른 경우에는 응답 가능).

@dansteingart - 충분한 JS 핵만 있으면 작동할 수 있다는 데 동의합니다. 그러나 그럼에도 불구하고 저는 이 기능을 포함하도록 이 패키지를 근본적으로 수정하는 것을 지지하지 않습니다.

왜요? 글쎄, 한 조각은 그것이 matplotlib 인터페이스를 통해 플롯 요소, 그림 크기 등을 정의해야한다는 패키지 철학에 위배된다는 것입니다.

두 번째는 이것이 "필수" 기능이 아니며 이러한 필수가 아닌 기능에 대해 코드 기반을 훨씬 더 복잡하게 만드는 것은 장기적으로 패키지에 손상을 줄 수 있다는 것입니다. 이것이 가능한 이유에 대한 배경 지식은 작년 SciPy에서 @ellisonbg 의 강연 을 참조하십시오.

이러한 종류의 동작을 추가하기 위해 플러그인 작업을 하고 싶다면 언제든지 환영합니다. 잘 작동한다면 plugins 모듈에 포함시킬 가치가 있습니다. 그러나 나는 그것이 아무리 멋지더라도 패키지의 철학에 반하는 새로운 기능에 대한 기본 그림 레이아웃의 주요 수정에 대해 단호하게 반대합니다.

나는 방금 이것에 사로잡혀 있었고 일종의 플러그인이 일종의 흥미로운 반응형 그림 크기 조정 동작을 수행할 수 있는 것처럼 들립니다. @dansteingart 는 기능에 대한 아이디어와 특정 방식으로 기능 구현을 시작할 가치가 있는지에 대한 질문으로 이 스레드를 시작했습니다. 질문에 대한 답변으로 플러그인으로 시작하여 _objects.py 또는 _js.py를 변경하지 않고 플러그인이 얼마나 멀리 갈 수 있는지 확인하는 것이 좋습니다. 하지만 그럴 준비가 되어 있다면 한 걸음 물러서서 우리가 해결하려고 하는 문제에 대해 이야기하고 싶습니다.

그림의 설정 크기가 화면에 반영되는 것은 좋지만 캔버스 크기를 경계 div로 설정하고 해당 div 크기를 브라우저 너비/무엇이든 결정하도록 하는 옵션이 있으면 "반응성"이 더 높을 것이라고 생각합니다. 그렇지 않으면 개발자가 원하는 것입니다.

이것이 나올 유스 케이스에 대한 설명을 원합니다. 내 일반 워크플로에서는 웹 브라우저가 최대화된 상태에서 클라우드에서 실행되는 노트북 서버와 함께 ipython을 사용합니다. 따라서 업무용 디스플레이에서 랩톱 디스플레이로 전환하고 화면 너비가 더 작아지면 문제가 발생할 수 있습니다. 하지만 다른 사람들이 생각하는 다른 설정이 있다고 확신합니다. 다른 무엇?

@jakevdp 충분히 공평하고 파이썬 측에서 _전혀_ 변경된 것이 없어야 한다는 데 동의합니다. 그러나 JS 쪽에서는 모두 공정한 게임이라고 생각하고 실험의 포인트가 matplotlib와 d3js의 가장 좋은 측면을 결합하는 것이라면 계속 추구할 가치가 있다고 생각합니다.

내가 보기에 fig_to_d3을 호출하면 파이썬 영역에서 벗어나 그림을 반응형으로 만들고 = 더 나은 JS를 작성합니다.

반응형 페이지의 유용성에 관해서는 iPython 출력만으로도 동의하지만 python은 iPython 노트북 이상이며 궁극적으로 mpl3d를 사용하여 크기 반응형 웹 페이지를 만드는 것이 여기에서 암시하는 것보다 더 유용할 것이라고 생각합니다.

귀하의 논리에 따라 matplotlib에 따라 세부 사항을 확대하려면 xlim/ylim을 변경해야 합니다.

훌륭한 패키지에 다시 한 번 감사드립니다. 플러그인으로 할 수 없는 일을 확인하고 다시 연락드리겠습니다.

@aflaxman

이것이 나올 유스 케이스에 대한 설명을 원합니다. 내 일반 워크플로에서는 웹 브라우저가 최대화된 상태에서 클라우드에서 실행되는 노트북 서버와 함께 ipython을 사용합니다. 따라서 업무용 디스플레이에서 랩톱 디스플레이로 전환하고 화면 너비가 더 작아지면 문제가 발생할 수 있습니다. 하지만 다른 사람들이 생각하는 다른 설정이 있다고 확신합니다. 다른 무엇?

http://pithy.io 참조

나는 나/내 그룹/내 수업이 스크립트를 작성한 다음 웹 앱으로 전환할 수 있도록 간략하게 작성했습니다. 그림이 창문에 딱 맞게 하면 삶이 훨씬 더 멋져집니다. MPL3d는 대화형 플롯을 수행할 수 있는 훨씬 좋은 도구를 제공하며(나는 플로트를 해킹하고 있었습니다) 대화형 플롯이 크기에 반응하면 모두 승리합니다.

@dansteingart 감사합니다. JS가 Python 사용자에게 숨겨져 있더라도 여전히 코드이며 유지 관리해야 합니다. 오픈 소스 개발에 대한 수년 간의 경험에 따르면 새로운 기능을 구현하는 데 열광하는 사람들이 종종 찾아오며 이러한 기능이 병합되면 유지 관리 및 유지 관리는 패키지에 투자한 소수의 개발자의 몫입니다. 장기간. 나는 이미 몇 년 전에 만든 잘 사용된 패키지에 대한 버그 보고서를 무시할 수 밖에 없을 정도로 지나치게 헌신적입니다. 나는 mpld3가 그 지점에 도달하는 것을 정말로 원하지 않습니다.

이해해 주셔서 감사합니다. 플러그인에 무엇을 조합할 수 있을지 기대됩니다.

@jakevdp 그 점은 잘 받아들여졌고, 플러그인 아키텍처가 그런 점에서 잘 작동한다고 생각합니다. 깨지면 내 잘못이 아니라 당신의 잘못이 될 것입니다 (즉, fig_to_d3 :-p를 변경하지 않는 한)

재작성이 시작되었으며 최소한 특별한 상황에서는 플러그인으로 구현하는 것이 _약간_ 더 쉬울 수 있습니다. 하지만 이런 역동적인 상황을 염두에 두고 쓴 것이 아니기 때문에 약간의 함정이 있을 수 있습니다. 이에 대해 진전이 있으면 알려주십시오.

안녕하세요, 훌륭한 프로젝트에 감사드립니다. 이 문제에 대한 진전이 있었습니까? 플러그인/기능이 개발되었습니까? 특히 "캔버스 크기를 경계 div로 설정하는 옵션"을 언급하고 있습니다. 감사 해요.

나는 이것이 가치 있는 기능이라고 생각하지만 플로팅 후 참조를 위해 d3을 사용하여 그림을 자동 크기 조정(여기서는 창 높이 포함)으로 만들 수 있습니다.

fetch("d3/" + figure + ".json")
    .then((response) => response.json())
    .then((data) => mpld3.draw_figure(figure, data))
    .then(() => {
        d3.select("#" + figure)
            .selectAll(".mpld3-figure")
            .attr("width", "100%")
            .attr("height", "70vh")
            .attr("viewBox", "0 0 1200 800")
            .attr("preserveAspectRatio", "xMinYMin meet");
    });

여기서 viewBox 를 사용하도록 @hadim 및 @carlinmack 을 두 번째로 사용하겠습니다. 실제로 매우 간단할 수 있습니다. 예를 들어, 현재 <svg width="1200" height="800"> 가 있는 경우 대신 <svg viewBox="0 0 1200 800"> 를 시도하십시오. 그게 다야 viewBox 는 svg 내부의 좌표계를 정의하고 width 및 height 매개변수는 선택 사항이 되어 다른 요소와 마찬가지로 외부 치수를 정의합니다. width=100% 를 사용하거나 css를 통해 직접 값을 설정할 수도 있습니다(css의 너비와 높이는 속성보다 우선함).

최신 크롬 버전에서 성공적으로 사용했습니다. 자세한 내용은 브라우저 간 종속성을 조사해야 하지만 결론은 명확하다고 생각합니다.

추신: https://css-tricks.com/scale-svg 에 배경 기사가 있지만 위에서 설명한 방법이 작동하고(최소한 최신 브라우저에서는) 개념적으로 간단할 때 혼란스럽습니다. viewBox = "0 0 ${width} ${height}" 내부 코드의 경우 width=... 및 height=... 또는 필요한 경우 크기 조정을 위한 css 매개변수.

네, 그게 바로 @carlinmack 이 제안한 것입니다. 순수한 HTML/CSS이기 때문에 "d3을 사용하여 그림을 자동 크기 조정"하는 것이 혼란스러웠지만, DOM 조작은 d3이 하는 일입니다. @carlinmack 이 표시하는 "preserveAspectRatio"는 내가 믿는 기본값입니다(적어도 css-tricks.com 링크에 설명되어 있음). 가로 세로 비율이 어쨌든 유지되는 경우 왜 height="70vh" 를 표시합니까? 그것은 매우 좁고 키가 큰 인물에 대한 일종의 상한입니까?

맞습니다, 저는 세로 그림이 뷰포트보다 높은 것을 원하지 않았습니다. :)

필요 이상으로 피규어를 크게 만드는 것 외에는 주변 내용과의 밀착이 필요한 경우에는 적합하지 않습니다. 대신 max-height 를 사용하면 효과적입니다.

다음은 브라우저에서 mpld3 수치를 로드하는 방법입니다.

      let figureID = "id_12345" ; 
      let dataURL = figureID + ".json" ; 

      d3.json(dataURL).then( function(data) {
        mpld3.draw_figure(figureID, data);
        return data;
      }).then( function(data) {
        d3.select("#" + figureID)
          .selectAll(".mpld3-figure")
          .attr("width", null)   // remove "width" and "height" attributes as set by mpld3
          .attr("height", null)  
          .attr("viewBox", `0 0 ${data.width} ${data.height}`)
      });

토론에 감사드립니다 @carlinmack @perrette ! 우연히도 우리는 이것을 만났습니다. @dkong-idm의 솔루션은 다음과 같습니다.

    const resizeChart = (viewBoxSettings) => {
        let svg = document.getElementsByClassName("mpld3-figure");

        if (svg && svg.length > 0) {
            svg[0].setAttribute("viewBox",viewBoxSettings );
            svg[0].setAttribute("width", "90vw");
            svg[0].setAttribute("height", "auto");
        }
    }

@vladh , 이 자동 크기 조정 기능을 mpld3 에 추가하는 데 많은 작업이 필요합니까? draw_figure 에 대한 선택적 인수 또는 독립 실행형 기능으로?

@cliffckerr 나는 이것을 draw_figure 에 확실히 추가할 수 있고 아마도 Object 를 취하고 해당 객체에 지정된 모든 속성을 svg 에 설정하는 인수로 전달할 수 있습니다. {viewBox: ..., width: '90vw', height: 'auto'} 와 같은 것입니다.

fig_to_html() 를 지원하기 위해 이것이 다른 곳에 추가되어야 한다고 생각하시는지 이 스레드의 귀하와 다른 사람들에게 묻고 싶었습니다. 그렇다면 우리는 그것에 대한 해결책을 생각해야 할 것입니다. 그렇지 않으면 알려주시면 바로 draw_figure() 을 변경할 수 있습니다.

@vladh 예, fig_to_html() 에서도 매우 유용합니다.