224

ধরুন আমার কাছে একটি হিস্টগ্রাম স্ক্রিপ্ট রয়েছে যা একটি 960 500 এসভিজি গ্রাফিক তৈরি করে। গ্রাফিক প্রস্থ এবং উচ্চতাগুলি গতিশীল করার জন্য আমি কীভাবে এই প্রতিক্রিয়াশীল করব?

<script> 

var n = 10000, // number of trials
    m = 10,    // number of random variables
    data = [];

// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
  for (var s = 0, j = 0; j < m; j++) {
    s += Math.random();
  }
  data.push(s);
}

var histogram = d3.layout.histogram()
    (data);

var width = 960,
    height = 500;

var x = d3.scale.ordinal()
    .domain(histogram.map(function(d) { return d.x; }))
    .rangeRoundBands([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
    .range([0, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("rect")
    .data(histogram)
  .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return height - y(d.y); })
    .attr("height", function(d) { return y(d.y); });

svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", height)
    .attr("y2", height);

</script>

পুরো উদাহরণ হিস্টগ্রামের সংক্ষেপ: https://gist.github.com/993912

javascript responsive-design d3.js

— ম্যাট অ্যালকক
সূত্র

5

আমি এই উত্তরের পদ্ধতিটি সহজ হতে পেয়েছি: stackoverflow.com/a/11948988/511203

— মাইক গারস্কি

আমি খুঁজে পাওয়া সবচেয়ে সহজ উপায়টি হল এসজিজি প্রস্থ এবং উচ্চতা: 100% এবং

— ডিওএম

316

অন্য উপায় এই গ্রাফ redrawing প্রয়োজন হয় না যে কাজ করতে, এবং এটি পরিবর্তন জড়িত থাকে viewBox এবং preserveAspectRatio উপর বৈশিষ্ট্যাবলী <svg>উপাদান:

<svg id="chart" width="960" height="500"
  viewBox="0 0 960 500"
  preserveAspectRatio="xMidYMid meet">
</svg>

11/24/15 আপডেট করুন : বেশিরভাগ আধুনিক ব্রাউজারগুলি এসভিজি উপাদানগুলির অনুপাতের অনুপাতটি নির্ধারণ viewBoxকরতে পারে, তাই আপনাকে চার্টের আকারটি আপ টু ডেট রাখার দরকার নেই। আপনি যদি পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান তবে উইন্ডোটি এর মতো আকার পরিবর্তন করলে আপনি নিজের উপাদানটিকে পুনরায় আকার দিতে পারেন:

var aspect = width / height,
    chart = d3.select('#chart');
d3.select(window)
  .on("resize", function() {
    var targetWidth = chart.node().getBoundingClientRect().width;
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
  });

এবং এসভিজি বিষয়বস্তু স্বয়ংক্রিয়ভাবে মাপা হবে। আপনি এর একটি কার্যকারী উদাহরণ দেখতে পারেন (কিছু পরিবর্তন সহ) এখানে কীভাবে প্রতিক্রিয়া হয় তা দেখতে উইন্ডোটি বা নীচের ডান দিকের ফলকে পুনরায় আকার দিন।

— শন অ্যালেন
সূত্র

1

আমি সত্যিই এই পদ্ধতির শান পছন্দ করি, 2 টি প্রশ্ন। 1 ভিউবক্স ক্রস ব্রাউজারে কাজ করে? ২. আপনার উদাহরণে চেনাশোনাগুলি পুনরায় আকার দিন তবে উইন্ডোতে ফিট করে না। এসভিজি ভিউ বাক্স বা দিক অনুপাতের সাথে কিছু ভুল হচ্ছে।

— ম্যাট অ্যালকক

4

এই পদ্ধতিরটি পছন্দ করুন, উপরেরটি সঠিকভাবে কাজ করে তা নিশ্চিত নয়। ম্যাট যেমনটি বলেছিলেন, চেনাশোনাগুলি আবার আকার দেয় তবে গ্রাফের বাম থেকে প্রথম বৃত্তের দূরত্বটি বৃত্তগুলির মতো একই হারে পুনরায় আকার দেয় না। আমি jsfiddle এ মোটামুটি বিড়াল দেওয়ার চেষ্টা করেছি তবে গুগল ক্রোম ব্যবহার করে এটি প্রত্যাশার মতো কাজ করতে পারিনি। কি ব্রাউজারগুলি ভিউবক্স এবং সংরক্ষণের জন্য স্পেকট্যাটিওর সাথে সামঞ্জস্যপূর্ণ?

— ক্রিস উইথারস

9

প্রকৃতপক্ষে কেবল ভিউবক্স এবং সেফেক্টরেটিও একটি এসভিজিতে সেট করুন প্রস্থের উচ্চতা 100% প্যারেডে সেট করা, এবং পিতা বা মাতা একটি বুটস্ট্র্যাপ / ফ্লেক্স গ্রিড পুনরায়

— আকারের

2

দীপু ঠিক আছে কিনা তা নিশ্চিত করা। বুটস্ট্র্যাপ / ফ্লেক্স গ্রিডের সাথে কাজ করে। ধন্যবাদ দীপু

— মাইক ও'কনোর

3

দ্রষ্টব্য: বেশ কয়েকটি ডি 3 টি টিউটোরিয়ালে 1.) এইচটিএমএলে এসভিজি প্রস্থ এবং উচ্চতা সেট করা আছে এবং 2.) ভিজ্যুয়ালাইজেশনটি কোনও onload ফাংশন কলের মাধ্যমে তৈরি করা হয় । যদি এসভিজি প্রস্থ এবং উচ্চতা প্রকৃত এইচটিএমএল এ সেট করা থাকে এবং আপনি উপরের কৌশলটি ব্যবহার করেন তবে চিত্রটি স্কেলযোগ্য হবে না।

— SumNeuron

34

'প্রতিক্রিয়াশীল এসভিজি' সন্ধান করুন কোনও এসভিজিকে প্রতিক্রিয়াশীল করা বেশ সহজ এবং আপনার আর মাপের বিষয়ে চিন্তা করতে হবে না।

আমি এটি কীভাবে করেছি তা এখানে:

d3.select("div#chartId")
   .append("div")
   .classed("svg-container", true) //container class to make it responsive
   .append("svg")
   //responsive SVG needs these 2 attributes and no width and height attr
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 600 400")
   //class to make it responsive
   .classed("svg-content-responsive", true);

সিএসএস কোড:

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

আরও তথ্য / টিউটোরিয়াল:

http://demosthenes.info/blog/744/Make-SVG-Responsive

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

— cminatti
সূত্র

1

আমার ক্ষেত্রে, প্যাডিং-নীচে: 100% আমার পাত্রে নীচে অতিরিক্ত প্যাডিং তৈরি করবে, তাই আমি এটিকে সরাতে 50% এ পরিবর্তন করেছি। আপনার কোড ব্যবহার করেছেন এবং সাফল্যের সাথে এসভিজিকে প্রতিক্রিয়াশীল করুন, ধন্যবাদ।

— ভি-শাই

20

এটি সমাধানের জন্য আমি একটি ছোট টুকরোটি কোড আপ করেছি।

সাধারণ সমাধান প্যাটার্নটি হ'ল:

স্ক্রিপ্টটিকে গণনা এবং অঙ্কন ফাংশনগুলিতে ব্রেকআউট করুন।
অঙ্কন ফাংশনটি গতিশীলভাবে অঙ্কিত হয়েছে এবং ভিজ্যুয়ালাইজেশন প্রস্থ এবং উচ্চতা ভেরিয়েবল দ্বারা চালিত হয়েছে তা নিশ্চিত করুন (এটি করার সর্বোত্তম উপায় হল ডি 3 স্কেল এপিআই ব্যবহার করা)
মার্কআপে একটি রেফারেন্স উপাদানকে অঙ্কন বেঁধে / চেইন করুন। (আমি এর জন্য jquery ব্যবহার করেছি, তাই এটি আমদানি করেছি)।
ইতিমধ্যে এটি আঁকা থাকলে এটি সরিয়ে ফেলতে ভুলবেন না। Jquery ব্যবহার করে রেফারেন্সড উপাদান থেকে মাত্রা পান।
উইন্ডো পুনরায় আকার ফাংশন থেকে আঁকা ফাংশন বাঁধুন / চেইন করুন। আমরা কেবল একটি সময়সীমা পেরিয়ে যাওয়ার পরে পুনরায় ছবি আঁকতে পারি তা নিশ্চিত করার জন্য এই চেইনে একটি ডেবিউন (টাইমআউট) প্রবর্তন করুন।

আমি গতির জন্য minified d3.js স্ক্রিপ্টও যুক্ত করেছি। সারাংশটি এখানে রয়েছে: https://gist.github.com/2414111 11

jquery রেফারেন্স পিছনে কোড:

$(reference).empty()
var width = $(reference).width();

উত্সাহ কোড:

var debounce = function(fn, timeout) 
{
  var timeoutID = -1;
  return function() {
     if (timeoutID > -1) {
        window.clearTimeout(timeoutID);
     }
   timeoutID = window.setTimeout(fn, timeout);
  }
};

var debounced_draw = debounce(function() {
    draw_histogram(div_name, pos_data, neg_data);
  }, 125);

 $(window).resize(debounced_draw);

উপভোগ করুন!

— ম্যাট অ্যালকক
সূত্র

এটি কাজ করে না বলে মনে হয়; আমি যদি সংশোধন গিস্টে অন্তর্ভুক্ত এইচটিএমএল ফাইলের উইন্ডোটিকে পুনরায় আকার দিই, উইন্ডোটি ছোট হওয়ার সাথে সাথে হিস্টোগ্রামটি এখনও কাটা হয়ে যায় ...

— ক্রিস উইথারস

1

এসভিজি একটি ভেক্টর বিন্যাস। আপনি যে কোনও ভার্চুয়াল ভিউবক্সের আকার সেট করতে পারেন এবং তারপরে এটি বাস্তব মাত্রায় স্কেল করতে পারেন। জেএস ব্যবহার করার দরকার নেই।

— ফিল পিরোজকভ

4

ভিউবক্স ব্যবহার না করে

এখানে এমন কোনও সমাধানের উদাহরণ দেওয়া আছে যা কোনও ব্যবহারের উপর নির্ভর করে না viewBox:

কী আপডেট হয় পরিসীমা এর দাঁড়িপাল্লা কোন ডেটা স্থাপন করতে ব্যবহৃত হয়।

প্রথমে আপনার আসল দিক অনুপাতটি গণনা করুন:

var ratio = width / height;

এর পরে, প্রতিটি পুনরায় আকার দেওয়ার উপর আপডেট rangeএর xএবং y:

function resize() {
  x.rangeRoundBands([0, window.innerWidth]);
  y.range([0, window.innerWidth / ratio]);
  svg.attr("height", window.innerHeight);
}

নোট করুন যে উচ্চতা প্রস্থ এবং দিক অনুপাতের ভিত্তিতে, যাতে আপনার মূল অনুপাত বজায় থাকে।

অবশেষে, চার্টটি "পুনরায় আঁকুন" - কোনও xবা কোনও yস্কেলের উপর নির্ভর করে এমন কোনও বৈশিষ্ট্য আপডেট করুন :

function redraw() {
    rects.attr("width", x.rangeBand())
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y.range()[1] - y(d.y); })
      .attr("height", function(d) { return y(d.y); });
}

নোট যে পুনরায় নির্ধারন rectsতোমাদের উপর জয়ী-বাউন্ড ব্যবহার করতে পারেন rangeএর yপরিবর্তে স্পষ্টভাবে উচ্চতা ব্যবহার না করে:

.attr("y", function(d) { return y.range()[1] - y(d.y); })

কোড স্নিপেট দেখান

var n = 10000, // number of trials
  m = 10, // number of random variables
  data = [];

// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
  for (var s = 0, j = 0; j < m; j++) {
    s += Math.random();
  }
  data.push(s);
}

var histogram = d3.layout.histogram()
  (data);

var width = 960,
  height = 500;

var ratio = width / height;

var x = d3.scale.ordinal()
  .domain(histogram.map(function(d) {
    return d.x;
  }))

var y = d3.scale.linear()
  .domain([0, d3.max(histogram, function(d) {
    return d.y;
  })])

var svg = d3.select("body").append("svg")
  .attr("width", "100%")
  .attr("height", height);

var rects = svg.selectAll("rect").data(histogram);
rects.enter().append("rect");

function redraw() {
  rects.attr("width", x.rangeBand())
    .attr("x", function(d) {
      return x(d.x);
    })
    // .attr("y", function(d) { return height - y(d.y); })
    .attr("y", function(d) {
      return y.range()[1] - y(d.y);
    })
    .attr("height", function(d) {
      return y(d.y);
    });
}

function resize() {
  x.rangeRoundBands([0, window.innerWidth]);
  y.range([0, window.innerWidth / ratio]);
  svg.attr("height", window.innerHeight);
}

d3.select(window).on('resize', function() {
  resize();
  redraw();
})

resize();
redraw();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

স্নিপেট প্রসারিত করুন

— পল মারে
সূত্র

3

আপনি যদি c3.js এর মাধ্যমে d3.js ব্যবহার করছেন তবে প্রতিক্রিয়াশীলতার সমস্যার সমাধানটি বেশ সোজা:

var chart = c3.generate({bindTo:"#chart",...});
chart.resize($("#chart").width(),$("#chart").height());

উত্পাদিত এইচটিএমএল দেখতে যেখানে দেখায়:

<div id="chart">
    <svg>...</svg>
</div>

— Vanna
সূত্র

2

শন অ্যালেনের উত্তর দুর্দান্ত ছিল। তবে আপনি প্রতি একক সময় এটি করতে চাইবেন না। যদি আপনি এটি vida.io এ হোস্ট করেন আপনার এসভিজি ভিজ্যুয়ালাইজেশনের জন্য স্বয়ংক্রিয় প্রতিক্রিয়া পাবেন।

আপনি এই সাধারণ এম্বেড কোড সহ প্রতিক্রিয়াশীল iframe পেতে পারেন:

<div id="vida-embed">
<iframe src="http://embed.vida.io/documents/9Pst6wmB83BgRZXgx" width="auto" height="525" seamless frameBorder="0" scrolling="no"></iframe>
</div>

#vida-embed iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

http://jsfiddle.net/dnprock/npxp3v9d/1/

প্রকাশ: আমি vida.io এ এই বৈশিষ্ট্যটি তৈরি করি ।

— ফুুক ডু
সূত্র

2

আপনি প্লটটেবল.জেএস এর মতো ডি 3 র‌্যাপার ব্যবহার করছেন এমন ক্ষেত্রে সচেতন হন যে সবচেয়ে সহজ সমাধানটি হয়ত কোনও ইভেন্ট শ্রোতার সাথে যুক্ত হবে এবং তারপরে একটি পুনরায় ফাংশন ( redrawপ্লটটেবল.জেজে) কল করবে। Plottable.js এর ক্ষেত্রে এটি দুর্দান্তভাবে কাজ করবে (এই পদ্ধতিটি নথিভুক্ত নয়):

    window.addEventListener("resize", function() {
      table.redraw();
    });

— রিলে স্টিল পার্সন
সূত্র

যত দ্রুত সম্ভব redraw গুলি চালানো এড়াতে এই ফাংশনটি চালু করা সম্ভবত সেরা

— ইয়ান

1

লোকেরা এখনও এই প্রশ্নটি ভিজিট করছে - আমার জন্য কী কাজ করেছে তা এখানে:

আইফ্রেমটি একটি ডিভের সাথে সংযুক্ত করুন এবং সিএসএস ব্যবহার করে একটি ডিভিডিং যুক্ত করুন, বলুন, সেই ডিভের 40% (আপনি যে দিকটির অনুপাতের উপর নির্ভর করে শতাংশ) depending তারপরে iframe এর প্রস্থ এবং উচ্চতা উভয়ই সেট করুন 100%।
এইচটিএমএল ডক্টে আইফ্রেমে লোড করার জন্য চার্টটি রয়েছে, ডিভের প্রস্থের সাথে প্রস্থটি সেট করুন যা এসভিজি সংযুক্ত করা হয় (বা শরীরের প্রস্থে) এবং প্রস্থকে * প্রস্থ অনুপাতের সাথে উচ্চতা নির্ধারণ করে।
উইন্ডো আকার পরিবর্তন করে iframe সামগ্রীটি পুনরায় লোড করে এমন একটি ফাংশন লিখুন, যাতে লোকেরা যখন তাদের ফোনটি ঘোরান তখন চার্টের আকারটি খাপ খাইয়ে নিতে পারে।

এখানে আমার ওয়েবসাইটে উদাহরণ: http://dirkmjk.nl/en/2016/05/ebbed-d3js-charts-responsive-website

আপডেট 30 ডিসেম্বর 2016

আমি উপরে বর্ণিত পদ্ধতির কিছু ত্রুটি রয়েছে, বিশেষত যে এটি কোনও শিরোনাম এবং ক্যাপশনগুলি ডি 3-নির্মিত এসভিজির অংশ নয় বলে বিবেচনা করে না। আমি যেহেতু আমার মনে করি এটি একটি আরও ভাল পদ্ধতির মাধ্যমে এসে পৌঁছেছি:

ডিভের চার্টের প্রস্থটি ডিভের সাথে সংযুক্ত ডিভের প্রস্থের সাথে প্রস্থ নির্ধারণ করুন এবং তার উচ্চতা নির্ধারণের জন্য দিক অনুপাতটি ব্যবহার করুন;
এম্বেডড পৃষ্ঠাটি এইচটিএমএল 5 এর পোস্টম্যাসেজ ব্যবহার করে মূল পৃষ্ঠায় এর উচ্চতা এবং url প্রেরণ করুন;
প্যারেন্ট পৃষ্ঠায়, সম্পর্কিত আইফ্রেমে সনাক্ত করার জন্য ইউআরএলটি ব্যবহার করুন (আপনার পৃষ্ঠায় একাধিক iframe থাকলে দরকারী) এবং এম্বেডড পৃষ্ঠার উচ্চতায় এর উচ্চতা আপডেট করুন।

এখানে আমার ওয়েবসাইটে উদাহরণ: http://dirkmjk.nl/en/2016/12/e এমবেডিং-d3js-charts- দায়িত্বজ্ঞানহীন ওয়েবসাইট ওয়েবসাইট -বিশ্লেষ সমাধান

— dirkmjk
সূত্র

0

ডি 3 ডেটা-যুক্ত হওয়ার প্রাথমিক নীতিগুলির একটি হ'ল এটি আদর্শবান। অন্য কথায়, আপনি যদি একই ডেটা দিয়ে বারবার কোনও ডেটা-জয়েন্টকে মূল্যায়ন করেন তবে রেন্ডার আউটপুট একই। অতএব, আপনি যতক্ষণ আপনার চার্টটি সঠিকভাবে রেন্ডার করবেন ততক্ষণ যত্ন সহকারে আপনার প্রবেশ, আপডেট এবং প্রস্থানগুলি নির্বাচন করে নেবেন - আকার পরিবর্তন করার পরে আপনাকে যা করতে হবে তা সম্পূর্ণরূপে চার্টটি পুনরায় রেন্ডার করতে হবে।

আপনার আরও কয়েকটি কাজ করা উচিত, এটি হ'ল উইন্ডোটি আকার পরিবর্তন করতে ডি-বাউন্স res এছাড়াও, হার্ড-কোডিং প্রস্থ / উচ্চতাগুলির চেয়ে বরং এটি উপাদান যুক্ত করে পরিমাপ করেই অর্জন করা উচিত।

বিকল্প হিসাবে, এখানে আপনার চার্টটি d3fc ব্যবহার করে রেন্ডার করা হয়েছে , যা D3 উপাদানগুলির একটি সেট যা সঠিকভাবে ডেটা- যোগগুলিতে পরিচালনা করে। এটিতে একটি কার্টেসিয়ান চার্ট রয়েছে যা এটিকে উপাদানযুক্ত করে তোলে যা 'প্রতিক্রিয়াশীল' চার্ট তৈরি করা সহজ করে:

// create some test data
var data = d3.range(50).map(function(d) {
  return {
    x: d / 4,
    y: Math.sin(d / 4),
    z: Math.cos(d / 4) * 0.7
  };
});

var yExtent = fc.extentLinear()
  .accessors([
    function(d) { return d.y; },
    function(d) { return d.z; }
  ])
  .pad([0.4, 0.4])
  .padUnit('domain');

var xExtent = fc.extentLinear()
  .accessors([function(d) { return d.x; }]);

// create a chart
var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear())
  .yDomain(yExtent(data))
  .yLabel('Sine / Cosine')
  .yOrient('left')
  .xDomain(xExtent(data))
  .xLabel('Value')
  .chartLabel('Sine/Cosine Line/Area Chart');

// create a pair of series and some gridlines
var sinLine = fc.seriesSvgLine()
  .crossValue(function(d) { return d.x; })
  .mainValue(function(d) { return d.y; })
  .decorate(function(selection) {
    selection.enter()
      .style('stroke', 'purple');
  });

var cosLine = fc.seriesSvgArea()
  .crossValue(function(d) { return d.x; })
  .mainValue(function(d) { return d.z; })
  .decorate(function(selection) {
    selection.enter()
      .style('fill', 'lightgreen')
      .style('fill-opacity', 0.5);
  });

var gridlines = fc.annotationSvgGridline();

// combine using a multi-series
var multi = fc.seriesSvgMulti()
  .series([gridlines, sinLine, cosLine]);

chart.plotArea(multi);

// render
d3.select('#simple-chart')
  .datum(data)
  .call(chart);

আপনি এই কোডেপেনে এটিকে ক্রিয়াতে দেখতে পাবেন:

https://codepen.io/ColinEberhardt/pen/dOBvOy

যেখানে আপনি উইন্ডোটির আকার পরিবর্তন করতে পারেন এবং যাচাই করতে পারেন যে চার্টটি সঠিকভাবে পুনরায় রেন্ডার হয়েছে।

দয়া করে মনে রাখবেন, সম্পূর্ণ প্রকাশ হিসাবে, আমি ডি 3 এফসি রক্ষণাবেক্ষণকারীদের একজন।

— ColinE
সূত্র

আপনার উত্তরগুলি আপ টু ডেট রাখার জন্য ধন্যবাদ! আমি আপনার কিছু পোস্টের সাম্প্রতিক আপডেটগুলি দেখেছি এবং আমি তাদের সত্যিই তাদের সামগ্রীতে পুনর্বিবেচনার প্রশংসা করি! যাইহোক, একটা বিষয়ে সতর্ক থাকা হিসাবে, এই পর্যালোচনাটি সম্পূর্ণরূপে প্রশ্ন আর, মাপসই করা হবে না কারণ আপনার থেকে D3 সম্পাদনা V4 , যেহেতু ওপি পরিষ্কারভাবে বোঝায় v3 এর , যা ভবিষ্যতে পাঠকদের গুলান পারে। ব্যক্তিগতভাবে, আমার নিজের উত্তরের জন্য, আমি একটি যোগ করার জন্য ঝোঁক V4 এখনও মূল পালন অধ্যায় v3 এর অধ্যায়। আমি মনে করি v4 উভয় পোস্টে একটি মিউচুয়াল রেফারেন্স যুক্ত করে নিজের উত্তরটির পক্ষে ভাল হতে পারে। তবে এটি কেবল আমার দুটি সেন্ট ...

— altocumulus

এটা সত্যিই ভাল পয়েন্ট! বহন করা এত সহজ এবং কেবল ভবিষ্যতের উপর এবং কী নতুন। নতুন ডি 3 টি প্রশ্নের দ্বারা বিচার করে আমার মনে হয় অনেক লোক এখনও v3 ব্যবহার করছে। কিছু পার্থক্য কতটা সূক্ষ্ম তা হতাশও! আমি আমার সম্পাদনাগুলি পুনরায় ঘুরে

— দেখব

0

আমি প্লেগের মতো আকারগুলি পরিবর্তন / টিকগুলি এড়াতে পারি কারণ তারা অদক্ষ এবং আপনার অ্যাপ্লিকেশনটিতে সমস্যা সৃষ্টি করতে পারে (উদাহরণস্বরূপ একটি সরঞ্জামদণ্ড উইন্ডোর আকারে প্রদর্শিত হওয়া অবস্থানটি পুনরায় গণনা করে, তারপরে কিছুক্ষণ পরে আপনার চার্টটিও আকার পরিবর্তন করে এবং পৃষ্ঠাটি পুনরায়- লেআউট এবং এখন আপনার টুলটিপটি আবার ভুল is

আপনি কিছু পুরানো ব্রাউজারগুলিতে এই আচরণটি অনুকরণ করতে পারেন যা IE11 এর মতো এটি যথাযথভাবে সমর্থন করে না এমন <canvas>উপাদান ব্যবহার করে যা এর দিকটি বজায় রাখে।

960x540 দেওয়া যা 16: 9 এর দিক:

<div style="position: relative">
  <canvas width="16" height="9" style="width: 100%"></canvas>
  <svg viewBox="0 0 960 540" preserveAspectRatio="xMidYMid meet" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-tap-highlight-color: transparent;">
  </svg>
</div>

— ডমিনিক
সূত্র

0

এখানে অনেক জটিল উত্তর।

মূলত আপনাকে যা করতে হবে তা হ'ল বৈশিষ্ট্যের পক্ষে টিপুন widthএবং গুণাবলী:heightviewBox

width = 500;
height = 500;

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`)

আপনার যদি মার্জিন থাকে তবে আপনি সেগুলি কেবল প্রস্থ / উচ্চতায় যুক্ত করতে পারেন তবে কেবল gতারপরে সংযোজন করুন এবং এটিকে রূপান্তর করুন যা আপনি সাধারণত পছন্দ করেন।

— জারেড উইলবার
সূত্র

-1

ভিজ্যুয়ালাইজেশনের আকারটি মানিয়ে নিতে আপনি বুটস্ট্র্যাপ 3 ও ব্যবহার করতে পারেন । উদাহরণস্বরূপ, আমরা এইচটিএমএল কোডটি সেট আপ করতে পারি :

<div class="container>
<div class="row">

<div class='col-sm-6 col-md-4' id="month-view" style="height:345px;">
<div id ="responsivetext">Something to write</div>
</div>

</div>
</div>

আমার প্রয়োজনের কারণে আমি একটি নির্দিষ্ট উচ্চতা স্থাপন করেছি তবে আপনি আকারটি অটোও রেখে দিতে পারেন। "কল-স্ম -6 কল-এমডি -4" বিভিন্ন ডিভাইসের জন্য ডিভিটি প্রতিক্রিয়াযুক্ত করে। আপনি http://getbootstrap.com/css/#grid-example-basic এ আরও শিখতে পারেন

আমরা আইডি মাসের ভিউয়ের সাহায্যে গ্রাফটি অ্যাক্সেস করতে পারি ।

আমি ডি 3 কোড সম্পর্কে খুব বেশি বিশদে যাব না, আমি কেবলমাত্র সেই অংশটি ইনপুট করব যা বিভিন্ন স্ক্রিনের আকারের সাথে মানিয়ে নেওয়ার জন্য প্রয়োজনীয়।

var width = document.getElementById('month-view').offsetWidth;

var height = document.getElementById('month-view').offsetHeight - document.getElementById('responsivetext2').offsetHeight;

আইডি মাস-ভিউয়ের সাথে ডিভের প্রস্থ পেয়ে প্রস্থটি সেট করা হয়।

আমার ক্ষেত্রে উচ্চতার পুরো অঞ্চলটি অন্তর্ভুক্ত করা উচিত নয়। আমার বারের উপরে কিছু পাঠ্যও রয়েছে তাই আমারও সেই অঞ্চলটি গণনা করা দরকার। এজন্য আমি আইডি রেসপনটেক্সট দিয়ে পাঠ্যের ক্ষেত্রটি চিহ্নিত করলাম। বারের অনুমোদিত উচ্চতা গণনা করার জন্য, আমি ডিভের উচ্চতা থেকে পাঠ্যের উচ্চতা বিয়োগ করেছি।

এটি আপনাকে এমন একটি বার দিতে দেয় যা সমস্ত বিভিন্ন স্ক্রিন / ডিভ আকার গ্রহণ করবে। এটি করার সর্বোত্তম উপায় নাও হতে পারে তবে এটি অবশ্যই আমার প্রকল্পের প্রয়োজনে কাজ করে।

— arlindmusliu
সূত্র

1

হাই, আমি এটি চেষ্টা করেছি, তবে এসভিজি সামগ্রীটি ক্যালেন্ডার বা চার্টগুলির মতো আকার পরিবর্তন করছে না।

D3.js ভিজ্যুয়ালাইজেশন লেআউটটি প্রতিক্রিয়াশীল করার সর্বোত্তম উপায় কী?

ভিউবক্স ব্যবহার না করে